Use canvas to implement the screenshot upload function like Sina Weibo. canvas Sina

Use canvas to implement the screenshot upload function like Sina Weibo. canvas Sina

Recently, I was very interested in the Weibo Avatar upload function, so I wrote one using canvas. Please forgive me for not writing this article well. This program is currently available in Google browser and Firefox browser, and cannot be supported by IE browser.

Because the security mechanism of ie does not allow img to use the local path, If you want ie to support this program, you must first upload the image and then upload it to the image address of the img object.

I didn't write it here because I didn't write the back-end code of the upload function for the time being, and I'm not sure if there is any better solution.

The following are Sina's

The following is my screenshot

Code:

Var canvas = document. getElementById ('canvas '), context = canvas. getContext ('D'), canvas = document. getElementById ('canvas _ dp '), context = canvas. getContext ('D'), image = new Image (), // document. getElementById ('myimg '), imageData, scale, // scaling ratio: rubberbandRectangle = {left:, top:, width:, height:}, resize =; oldRubberbandRectangle = {}; dragging = false, extending = false, mousedown ={}; // Functions .. ........................................ ........... Function windowToCanvas (canvas, x, y) {var canvasRectangle = canvas. getBoundingClientRect (); return {x: x-canvasRectangle. left, y: y-canvasRectangle. top };}// draw the captured image in a small canvas. function captureCanvasPixels () {context. drawImage (image, rubberbandRectangle. left/scale, rubberbandRectangle. top/scale, rubberbandRectangle. width/scale, rubberbandRect Angle. height/scale,);} function drawRubberband () {context. save (); context. beginPath (); // start the new path rect (rubberbandRectangle. left, rubberbandRectangle. top, rubberbandRectangle. width, rubberbandRectangle. height); context. fillStyle = 'rgba (,,,.) '; addRectanglePath (); context. fill (); // fill in the path context. fillStyle = 'rgba (,) '; captureCanvasPixels (); // copy the selected image to the context in the preview canvas. beginPath (); context. strokeSty Le = '#'; context. lineWidth = .; context. arc (rubberbandRectangle. left + rubberbandRectangle. width, rubberbandRectangle. top + rubberbandRectangle. height, Math. PI *, true); context. fill (); // fill in the path context. stroke (); // fill in the path context. restore ();} function rect (x, y, w, h, direction) {if (direction) {// context. moveTo (x, y); context. lineTo (x, y + h); context. lineTo (x + w, y + h); context. lineTo (x + w, y);} else {// Clockwise context. moveTo (x, y); context. lineTo (x + w, y); context. lineTo (x + w, y + h); context. lineTo (x, y + h);} context. closePath ();} function addRectanglePath () {rect (, canvas. width, canvas. height, true);} function startDragging (loc) {mousedown. x = loc. x; mousedown. y = loc. y; oldRubberbandRectangle. left = rubberbandRectangle. left; oldRubberbandRectangle. top = rubberbandRectangle. top;} function u PdateRubberbandRectangle (loc) {var left = oldRubberbandRectangle. left + loc. x-mousedown.x; var top = oldRubberbandRectangle. top + loc. y-mousedown. y; rubberbandRectangle. left = (left <)?: Left; rubberbandRectangle. top = (top <)?: Top; if (rubberbandRectangle. left + rubberbandRectangle. width> image. width * scale) rubberbandRectangle. left = image. width * scale-rubberbandRectangle. width; if (rubberbandRectangle. top + rubberbandRectangle. height> image. height * scale) rubberbandRectangle. top = image. height * scale-rubberbandRectangle. height; drawRubberband ();} function startExtendSelection (loc) {mousedown. x = loc. x; mousedown. y = loc. y; oldRubberbandRectangle. width = rubberbandRectangle. width; oldRubberbandRectangle. height = rubberbandRectangle. height;} function extendSelection (loc) {var width = parseInt (oldRubberbandRectangle. width) + parseInt (loc. x)-parseInt (mousedown. x); var height = parseInt (oldRubberbandRectangle. height) * parseInt (width)/parseInt (oldRubberbandRectangle. width); rubberbandRectangle. width = width; rubberbandRectangle. height = height; drawRubberband ();} function clearRubberbandRectangle () {context. clearRect (, canvas. width, canvas. height); context. putImageData (imageData ,,);} // Event handlers .................................... ........... canvas. onmousedown = function (e) {e. preventDefault (); var loc = windowToCanvas (canvas, e. clientX, e. clientY); if (rubberbandRectangle. left <loc. x & rubberbandRectangle. top <loc. y & (rubberbandRectangle. left + rubberbandRectangle. width)> loc. x & (rubberbandRectangle. top + rubberbandRectangle. height)> loc. y) {dragging = true; startDragging (loc);} else if (rubberbandRectangle. left + rubberbandRectangle. width-) <loc. x & (rubberbandRectangle. top + rubberbandRectangle. height-) <loc. y & (rubberbandRectangle. left + rubberbandRectangle. width +)> loc. x & (rubberbandRectangle. top + rubberbandRectangle. height +)> loc. y) {extending = true; startExtendSelection (loc) ;}} canvas. onmousemove = function (e) {e. preventDefault (); var loc = windowToCanvas (canvas, e. clientX, e. clientY); if (rubberbandRectangle. left <loc. x & rubberbandRectangle. top <loc. y & (rubberbandRectangle. left + rubberbandRectangle. width)> loc. x & (rubberbandRectangle. top + rubberbandRectangle. height)> loc. y) {canvas. style. cursor = 'move ';} else if (rubberbandRectangle. left + rubberbandRectangle. width-) <loc. x & (rubberbandRectangle. top + rubberbandRectangle. height-) <loc. y & (rubberbandRectangle. left + rubberbandRectangle. width +)> loc. x & (rubberbandRectangle. top + rubberbandRectangle. height +)> loc. y) {canvas. style. cursor = 'nw-resize';} else {canvas. style. cursor = '';} if (dragging) {clearRubberbandRectangle (); updateRubberbandRectangle (loc);} if (extending) {canvas. style. cursor = 'nw-resize'; clearRubberbandRectangle (); extendSelection (loc) ;}} canvas. onmouseup = function (e) {e. preventDefault (); dragging = false; extending = false ;} // Initialization ..................................... ......... var myfileInput = document. getElementById ('myfileinput'); myfileInput. onchange = function () {setImage (myfileInput) ;}; function setImage (fileObj) {if (fileObj. files & fileObj. files []) {// images supported by Google under Firefox. src = window. URL. createObjectURL (fileObj. files []);} else {alert ('Sorry, your browser does not support ');} image. src = ''; image. onload = function () {console. log (image); var w, h; // calculate the image scaling ratio if (image. width> canvas. width) {console. log (); w = canvas. width; h = canvas. width * image. height/image. width} else if (image. height> canvas. height) {console. log (); h = canvas. height; w = canvas. height * image. width/mage. height} else if (image. width/image. height> = canvas. width/canvas. height) {console. log (); w = canvas. width; h = canvas. width * image. height/image. width;} else if (image. width/image. height <canvas. width/canvas. height) {console. log (); w = canvas. height * image. width/image. height h = canvas. height;} scale = w/image. width; context. clearRect (, canvas. width, canvas. height); context. drawImage (image, w, h); console. log (w + ':' + h + '###' + canvas. width + ':' + canvas. height); imageData = context. getImageData (, canvas. width, canvas. height); drawRubberband ();};

Html

<! DOCTYPE html> 
The above code is very simple, with comments. If you have different opinions, please leave a message and share your learning progress. For more information about canvas Avatar capturing and uploading, please stay tuned to this site. New content is updated on this site every day.