在上传到html画布的图像上绘制 [英] draw on a image uploaded to a html canvas

问题描述

在我的网络应用程序中，我需要将图像上传到html5画布并在该图像上绘制并将其保存到计算机中。



Html

In my web application I need to upload an image into a html5 canvas and draw on that image and save it to the computer.

Html

 <input type='file' id="fileUpload" 

<canvas id="colors_sketch"  width="800" height="600" style="background-color:#ffffff;"></canvas>  

Javascript

Javascript

function el(id) { return document.getElementById(id); } // Get elem by ID

       var canvas = el("colors_sketch");
       var context = canvas.getContext("2d");

       function readImage() {
           if (this.files && this.files[0]) {
               var FR = new FileReader();
               FR.onload = function (e) {
                   var img = new Image();
                   img.onload = function () {
                       context.drawImage(img, 0, 0,img.width,img.height,0,0,800,600);
                   };
                   img.src = e.target.result;
               };
               FR.readAsDataURL(this.files[0]);
           }
       }

       el("fileUpload").addEventListener("change", readImage, false);

图像上传是使用上述方式完成的。我想要的是找到一种方法来绘制上传的图像请给我一些帮助。

Image uploading is done using the above way.What I want to is find a way to draw on the uploaded image.Can some one help please.

推荐答案

检查一下如何管理鼠标事件并在画布上画线：



http://stackoverflow.com/questions/2368784/ draw-on-html5-canvas-using-a-mouse [ ^ ]

Check this out on how to manage mouse events and draw lines on the canvas:

http://stackoverflow.com/questions/2368784/draw-on-html5-canvas-using-a-mouse[^]

这篇关于在上传到html画布的图像上绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！