当前位置:Gxlcms > JavaScript > 使用canvas实现仿新浪微博头像截取上传功能

使用canvas实现仿新浪微博头像截取上传功能

时间:2021-07-01 10:21:17 帮助过:16人阅读

最近看到微博头像上传功能很感兴趣,于是就使用canvas写了一个,本文写的不好还请见谅。本程序目前在谷歌浏览器和火狐浏览器测试可用,ie浏览器无法支持。 

因为ie的安全机制不允许img使用本地路径,所以若想ie支持本程序,必须先将图片上传,然后给img对象上传后的图片地址。

我在这里没写,是因为暂时没写上传功能的后端代码,并且还不确定有没有更好的解决办法。

如下是新浪的

如下是我做的截取部分

代码:

  1. var canvas = document.getElementById('canvas'),
  2. context = canvas.getContext('d'),
  3. canvas = document.getElementById('canvas_dp'),
  4. context = canvas.getContext('d'),
  5. image = new Image(),//document.getElementById('myimg'),
  6. imageData,
  7. scale,//缩放比例
  8. rubberbandRectangle = {left:,top:,width:,height:},
  9. resize = ;
  10. oldRubberbandRectangle = {};
  11. dragging = false,
  12. extending = false,
  13. mousedown = {};
  14. // Functions.....................................................
  15. function windowToCanvas(canvas, x, y) {
  16. var canvasRectangle = canvas.getBoundingClientRect();
  17. return {
  18. x: x - canvasRectangle.left,
  19. y: y - canvasRectangle.top
  20. };
  21. }
  22. //将截取的图片画在小的canvas中
  23. function captureCanvasPixels() {
  24. context.drawImage(image,rubberbandRectangle.left/scale,rubberbandRectangle.top/scale,rubberbandRectangle.width/scale,rubberbandRectangle.height/scale,,,,);
  25. }
  26. function drawRubberband() {
  27. context.save();
  28. context.beginPath();//开始新的路径
  29. rect(rubberbandRectangle.left,
  30. rubberbandRectangle.top,
  31. rubberbandRectangle.width,
  32. rubberbandRectangle.height);
  33. context.fillStyle='rgba(,,,.)';
  34. addRectanglePath();
  35. context.fill();//填充路径
  36. context.fillStyle='rgba(,,,)';
  37. captureCanvasPixels();//将选取的图像copy到预览canvas中
  38. context.beginPath();
  39. context.strokeStyle = '#';
  40. context.lineWidth = .;
  41. context.arc(rubberbandRectangle.left+rubberbandRectangle.width,rubberbandRectangle.top+rubberbandRectangle.height,,,Math.PI*,true);
  42. context.fill();//填充路径
  43. context.stroke();//填充路径
  44. context.restore();
  45. }
  46. function rect(x, y, w, h, direction){
  47. if(direction){//逆时针
  48. context.moveTo(x, y);
  49. context.lineTo(x, y + h);
  50. context.lineTo(x + w, y + h);
  51. context.lineTo(x + w, y);
  52. }else{//顺时针
  53. context.moveTo(x, y);
  54. context.lineTo(x + w, y);
  55. context.lineTo(x + w, y + h);
  56. context.lineTo(x, y + h);
  57. }
  58. context.closePath();
  59. }
  60. function addRectanglePath(){
  61. rect(,,canvas.width,canvas.height,true);
  62. }
  63. function startDragging(loc){
  64. mousedown.x = loc.x;
  65. mousedown.y = loc.y;
  66. oldRubberbandRectangle.left = rubberbandRectangle.left;
  67. oldRubberbandRectangle.top = rubberbandRectangle.top;
  68. }
  69. function updateRubberbandRectangle(loc){
  70. var left = oldRubberbandRectangle.left + loc.x-mousedown.x;
  71. var top = oldRubberbandRectangle.top + loc.y - mousedown.y;
  72. rubberbandRectangle.left = (left<) ? : left;
  73. rubberbandRectangle.top = (top < ) ? : top;
  74. if(rubberbandRectangle.left + rubberbandRectangle.width > image.width * scale)rubberbandRectangle.left = image.width * scale - rubberbandRectangle.width;
  75. if(rubberbandRectangle.top + rubberbandRectangle.height > image.height * scale)rubberbandRectangle.top = image.height * scale - rubberbandRectangle.height;
  76. drawRubberband();
  77. }
  78. function startExtendSelection(loc){
  79. mousedown.x = loc.x;
  80. mousedown.y = loc.y;
  81. oldRubberbandRectangle.width = rubberbandRectangle.width;
  82. oldRubberbandRectangle.height = rubberbandRectangle.height;
  83. }
  84. function extendSelection(loc){
  85. var width = parseInt(oldRubberbandRectangle.width) + parseInt(loc.x)-parseInt(mousedown.x);
  86. var height = parseInt(parseInt(oldRubberbandRectangle.height) * parseInt(width)/parseInt(oldRubberbandRectangle.width));
  87. rubberbandRectangle.width = width;
  88. rubberbandRectangle.height = height;
  89. drawRubberband();
  90. }
  91. function clearRubberbandRectangle(){
  92. context.clearRect(, , canvas.width, canvas.height);
  93. context.putImageData(imageData, ,);
  94. }
  95. // Event handlers...............................................
  96. canvas.onmousedown = function(e){
  97. e.preventDefault();
  98. var loc = windowToCanvas(canvas, e.clientX, e.clientY);
  99. if(rubberbandRectangle.left < loc.x && rubberbandRectangle.top < loc.y && (rubberbandRectangle.left + rubberbandRectangle.width) > loc.x && (rubberbandRectangle.top + rubberbandRectangle.height) > loc.y){
  100. dragging = true;
  101. startDragging(loc);
  102. }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){
  103. extending = true;
  104. startExtendSelection(loc);
  105. }
  106. }
  107. canvas.onmousemove = function (e) {
  108. e.preventDefault();
  109. var loc = windowToCanvas(canvas, e.clientX, e.clientY);
  110. if(rubberbandRectangle.left < loc.x && rubberbandRectangle.top < loc.y && (rubberbandRectangle.left + rubberbandRectangle.width) > loc.x && (rubberbandRectangle.top + rubberbandRectangle.height) > loc.y){
  111. canvas.style.cursor='move';
  112. }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){
  113. canvas.style.cursor='nw-resize';
  114. }else{
  115. canvas.style.cursor='';
  116. }
  117. if (dragging) {
  118. clearRubberbandRectangle();
  119. updateRubberbandRectangle(loc);
  120. }
  121. if(extending){
  122. canvas.style.cursor='nw-resize';
  123. clearRubberbandRectangle();
  124. extendSelection(loc);
  125. }
  126. }
  127. canvas.onmouseup = function(e){
  128. e.preventDefault();
  129. dragging = false;
  130. extending = false;
  131. }
  132. // Initialization..............................................
  133. var myfileInput = document.getElementById('myfileInput');
  134. myfileInput.onchange=function(){
  135. setImage(myfileInput);
  136. };
  137. function setImage(fileObj){
  138. if (fileObj.files && fileObj.files[]) {
  139. //火狐下,谷歌下都是支持的
  140. image.src = window.URL.createObjectURL(fileObj.files[]);
  141. } else {
  142. alert('对不起,您的浏览器不支持');
  143. }
  144. }
  145. image.src = '';
  146. image.onload = function () {
  147. console.log(image);
  148. var w,h;
  149. //计算图片缩放比例
  150. if(image.width>canvas.width){
  151. console.log();
  152. w = canvas.width;
  153. h = canvas.width*image.height/image.width
  154. }else if(image.height>canvas.height){
  155. console.log();
  156. h = canvas.height;
  157. w = canvas.height*image.width/mage.height
  158. }else if(image.width/image.height >= canvas.width/canvas.height){
  159. console.log();
  160. w = canvas.width;
  161. h = canvas.width*image.height/image.width;
  162. }else if(image.width/image.height < canvas.width/canvas.height){
  163. console.log();
  164. w = canvas.height*image.width/image.height
  165. h = canvas.height;
  166. }
  167. scale = w/image.width;
  168. context.clearRect(,,canvas.width,canvas.height);
  169. context.drawImage(image, , ,w, h);
  170. console.log( w+':'+h+'###'+canvas.width+':'+canvas.height);
  171. imageData= context.getImageData(, , canvas.width, canvas.height);
  172. drawRubberband();
  173. };

html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-">
  5. <title>CarlZhang</title>
  6. </head>
  7. <body>
  8. <div name="container" style="height:px;width:px;border:#BB px solid;text-align:center">
  9. <canvas id="canvas" style="z-index: ; " height="" width=""></canvas>
  10. </div>
  11. <!--预览-->
  12. <div name="display" style="height:px;width:px;border:#BB px solid;position:absolute;left:px;top:px;">
  13. <canvas id="canvas_dp" style="z-index: ; " height="" width=""></canvas>
  14. </div>
  15. <!--上传-->
  16. <input id="myfileInput" type="file" accept="image/gif, image/jpeg, image/x-png"/>
  17. <script src="js/cavas_img_upload.js" type="text/javascript" charset="utf-"></script>
  18. </body>
  19. </html>

以上代码很简单吧,附有注释,有不同见解的朋友,欢迎给我留言,共同交流学习进步。欲了解更多有关canvas头像截取上传问题,请持续关注本站,本站每天都有新的内容更新。

人气教程排行