裁切图片并上传到图片服务器

JesseZhao1990 commented 6 years ago

需求源

通过canvas截图，截到的是一个base64编码的图片，如果后端不处理base64编码的图片的情况下，前端需要自行转成file对象，上传到图片服务器

步骤

1.裁切图片

通过canvas的drawImage()方法，可以将图片的某一部分绘制（裁切）到画布中，然后利用canvas的toDataURL()方法，可以将画布中的图片导出base64编码的图片。

  var c = document.getElementById('myCanvas');
  var img = document.getElementById('img');

  var ctx = c.getContext('2d');
  ctx.drawImage(img,10,10,200,200); 
  var dataURI = c.toDataURL();

2.将base64的图片转为Blod对象

function getBlobBydataURI(dataURI,type){
          var binary = window.atob(dataURI.split(',')[1]);  
          var array = [];  
          for(var i = 0; i < binary.length; i++) {  
              array.push(binary.charCodeAt(i));  
          }  
          return new Blob([new Uint8Array(array)], {type:type });  
}

3.上传

由于file对象是继承的Blob对象，只是在Blob对象的基础上多了文件的大小名字等属性，所以，可直接上传Blob对象

import axios from axios;

const formData = new FormData();
const file = getBlobBydataURI(dataURI,'image/png');
formData.append('upload', file)

axios({
      method: 'POST',
      url: `http://hahahahaha.com/upload/action`,
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      data: formData,
 })
.then(rsp=>{
    console.log(rsp.data)
})

JesseZhao1990 commented 6 years ago

关于window.btoa() 和 window.atob()

javascript原生的api本来就支持,Base64,但是由于之前的javascript局限性，导致Base64基本中看不中用。当前html5标准正式化之际，Base64将有较大的转型空间,对于Html5 Api中出现的如FileReader Api, 拖拽上传,甚至是Canvas,Video截图都可以实现。

这两个函数的作用就是可以使用btoa和atob来进行Base64转码和解码

转成base64

let str = 'jessezhao'; 
console.log(window.btoa(str));  // amVzc2V6aGFv

将base64解码

console.log(window.atob('amVzc2V6aGFv'))   // jessezhao

参考文献：https://www.cnblogs.com/yangxiaodi/p/6043475.html

JesseZhao1990 commented 6 years ago

JavaScript charCodeAt() 方法

charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。

举例

const str="Hello world!"
console.log(str.charCodeAt(1)) //101

参考资料：http://www.w3school.com.cn/jsref/jsref_charCodeAt.asp

JesseZhao1990 commented 6 years ago

关于二进制数组

http://javascript.ruanyifeng.com/stdlib/arraybuffer.html

JesseZhao1990 commented 6 years ago

关于Blob对象

https://www.cnblogs.com/hhhyaaon/p/5928152.html

JesseZhao1990 commented 6 years ago

HTML canvas drawImage() 方法

drawImage() 方法接收一个图片或者视频，然后将接收到的图片或者视频在画布上绘制出来。此方法也能够绘制图像的某些部分（裁剪图片），以及/或者增加或减少图像的尺寸（压缩图片）。

语法1

在画布上定位图像：

context.drawImage(img,x,y);

语法2

在画布上定位图像，并规定图像的宽度和高度：

context.drawImage(img,x,y,width,height);

语法3

剪切图像，并在画布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数	描述
img	规定要使用的图像、画布或视频
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
sheight	可选。被剪切图像的宽度。
swidth	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像）

事例：https://codepen.io/zhaojianxin/pen/MrVwEp

JesseZhao1990 commented 6 years ago

HTML canvas toDataURL() 方法

文档参见：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

JesseZhao1990 / blog