相关疑难解决方法(0)

我在一个Web应用程序上工作,用于绘制图像.我使用CANVAS元素和javascript来绘制它,但我有一个问题:如何从用户的PC加载图像并在画布上绘制？我不想将它保存在服务器上,只在网页上保存!

这是代码的缩短版本(完整代码太长):

HTML:

Open file: <input type="file" id="fileUpload" accept="image/*" /><br />
<canvas id="canvas" onmousemove="keepLine()" onmouseup="drawLine()" onmousedown="startLine()" width="900" height="600" style="background-color:#ffffff;cursor:default;">
  Please open this website on a browser with javascript and html5 support.
</canvas>

JavaScript的:

var x = 0;
var y = 0;
var clicked = false;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

context.strokeStyle = "black";
context.lineCap = "round";

canvas.addEventListener('mousemove', function(e) { getMousePos(canvas, e); }, false);

takePicture.onchange = function (event) {
  var files = event.target.files,
    file;
  if (files && files.length …

我正在构建一个HTML5画布图像编辑器.将图像上传到画布后,我需要Dragg并在画布上调整大小.我设法上传了一张图片并将其拖放到画布上.但我需要在画布上使其可调整大小.提前致谢.

var Img = new Image();
Img.src = file;
Img.onload = function () {
  context.drawImage(Img, 50, 0, 200, 200); 
}
mouseMove = function (event){
if (down) 
{
 context.clearRect(0,0,800,500);
 context.translate(0, -50); 
 context.drawImage(Img, (event.clientX - offsetX),
 (event.clientY - offsetY), 200, 200);
 context.translate(0, 50);
}
}
mouseUp = function () {
  down = false;
}
mouseDown = function () {
  down = true;
}
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove',mouseMove, false);

我尝试使用kinetics,但它不适合用帆布.