uniquejava
commented
6 years ago cyper实战
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 id='toto'>cyper image editor</h1>
<br/>
<div id="sketch">
<canvas id="paint" style='border: 1px solid black'></canvas>
</div>
<button id="btnSave">save image</button>
<div id="output">
</div>
<script>
(function () {
function loadImage(url, canvas) {
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = url;
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
ctx.lineWidth = 2;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'red';
};
return ctx;
};
var canvas = document.querySelector('#paint');
//var sketch = document.querySelector('#sketch');
//var sketch_style = getComputedStyle(sketch);
//canvas.width = parseInt(sketch_style.getPropertyValue('width'));
//canvas.height = parseInt(sketch_style.getPropertyValue('height'));
var ctx = loadImage('./xray.jpg', canvas);
var addTouchListener = function (ctx) {
var mouse = {x: 0, y: 0};
var start_events = ["mousedown", "touchstart"];
var move_events = ["mousemove", "touchmove"];
var end_events = ["mouseup", "touchend"];
move_events.forEach(function (event) {
canvas.addEventListener(event, function (e) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false);
});
start_events.forEach(function (event) {
canvas.addEventListener(event, function (e) {
ctx.beginPath();
ctx.moveTo(mouse.x, mouse.y);
move_events.forEach(function (me) {
canvas.addEventListener(me, onPaint, false);
});
}, false);
});
end_events.forEach(function (event) {
canvas.addEventListener(event, function (e) {
move_events.forEach(function (me) {
canvas.removeEventListener(me, onPaint, false);
});
}, false);
});
var onPaint = function () {
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
};
};
addTouchListener(ctx);
var btnSave = document.querySelector('#btnSave');
btnSave.onclick = function () {
var image = new Image();
image.src = canvas.toDataURL('image/png');
document.querySelector('#output').appendChild(image);
};
}());
</script>
</body>
</html>
https://stackoverflow.com/questions/34403231/react-native-canvas-in-webview
https://code.tutsplus.com/tutorials/build-a-canvas-image-editor-with-canvas--net-18143
https://stackoverflow.com/questions/14757659/loading-an-image-onto-a-canvas-with-javascript
https://stackoverflow.com/questions/45493234/jspdf-not-allowed-to-navigate-top-frame-to-data-url
http://diveintohtml5.info/canvas.html
http://blog.teamtreehouse.com/how-to-draw-with-html-5-canvas
https://devdactic.com/signature-drawpad-ionic/
https://stackoverflow.com/questions/37432461/ionic-2-with-paper-js-flickering-canvas-and-white-box