The size and size of the image provided by the user are not suitable. How can I intercept and upload the image? Next, I will teach you how to use canvas to implement the Sina Weibo Avatar interception and upload function to solve the problem. You need to study it together. 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
CarlZhang