压缩图片：前端图片压缩上传（压缩篇）：可能是最适合小白的前端图片压缩文章了！
canvasDataURL(file) { let that = this return new Promise((resolve, reject) => { const reader = new FileReader() reader.readAsDataURL(file) // reader.onload = () => resolve(reader.result) reader.onload = function(e) { //读取完成的钩子 const img = new Image() const quality = 0.2 // 图像质量 const canvas = document.createElement('canvas') //创建canvas画布 const drawer = canvas.getContext('2d') //返回一个在画布上绘制2d图的环境对象，该对象上包含有canvas绘制2d图形的API img.src = this.result img.onload = function() { canvas.width = img.width canvas.height = img.height drawer.drawImage(img, 0, 0, canvas.width, canvas.height) // resolve(reader.result) const imgStr = file.size > 1024 * 1024 ? canvas.toDataURL('image/jpeg', quality) : reader.result // toDataURL（）将canvas转化为base64 resolve(imgStr) } } reader.onerror = error => reject(error) })
canvasDataURL(file) { let that = this return new Promise((resolve, reject) => { const reader = new FileReader() reader.readAsDataURL(file) // reader.onload = () => resolve(reader.result) reader.onload = function(e) { //读取完成的钩子 const img = new Image() const quality = 0.2 // 图像质量 const canvas = document.createElement('canvas') //创建canvas画布 const drawer = canvas.getContext('2d') //返回一个在画布上绘制2d图的环境对象，该对象上包含有canvas绘制2d图形的API img.src = this.result img.onload = function() { canvas.width = img.width canvas.height = img.height drawer.drawImage(img, 0, 0, canvas.width, canvas.height) // resolve(reader.result) const imgStr = file.size > 1024 * 1024 ? canvas.toDataURL('image/jpeg', quality) : reader.result // const attachid = getMd5(file) // that.saveInvoicePicNew({imgStr, invoice_attach: uuidv4(), attachid: await getMd5(file)}) // console.log(canvas.toDataURL('image/jpeg', quality),'base64') resolve(imgStr) } } reader.onerror = error => reject(error) })
找坐标参考：清除图片空白多余的方法。找坐标参考2，找坐标参考3（python+opencv)
var c = document.createElement('canvas'); //创建处理画布对象
var ctx = c.getContext('2d');
c.width = img.width;
c.height = img.height;
ctx.drawImage(img, 0, 0); //绘制
var imgData = ctx.getImageData(0, 0, c.width, c.height).data; //读取图片数据
var lOffset = c.width,
rOffset = 0,
tOffset = c.height,
bOffset = 0;
for (var i = 0; i < c.width; i++) {
for (var j = 0; j < c.height; j++) {
var pos = (i + c.width * j) * 4
if (imgData[pos] == 255 || imgData[pos + 1] == 255 || imgData[pos + 2] == 255 || imgData[pos + 3] == 255) {
bOffset = Math.max(j, bOffset); // 找到有色彩的最下端
rOffset = Math.max(i, rOffset); // 找到有色彩的最右端
tOffset = Math.min(j, tOffset); // 找到有色彩的最上端
lOffset = Math.min(i, lOffset); // 找到有色彩的最左端
}
}
}
lOffset++;
rOffset++;
tOffset++;
bOffset++;
var x = document.createElement("canvas"); //创建处理后画布对象
x.width = rOffset - lOffset;
x.height = bOffset - tOffset;
var xx = x.getContext("2d");
xx.drawImage(img, lOffset, tOffset, x.width, x.height, 0, 0, x.width, x.height); //绘制
console.log(x.toDataURL()); //得到最终裁剪出来的base64
最近看了学习了一下子canvas的相关知识，心情比较好，嗯，是的！
流行的截图是不是这样弄得？让我也来试试看，然后写了一个我很满意的demo，
暂评99分吧（90的鼓励分）
知识点
drawImage(img, x, y) : 在画布上定位图像
drawImage(img, x, y,width,height) : 在画布上定位图像，并规定图像高度
drawImage(img,sx,sy,swidth,sheight,x,y,width,height) : 剪切图像，并在画布上
定位被剪切的部分
img：规定要使用的图像、画布或视频
sx：可选。开始剪切的图片上的 x 坐标位置
sy：可选。开始剪切的图片上的 y 坐标位置
swidth：可选。被剪切图像的宽度
sheight：可选。被剪切图像的高度
x：在画布上放置图像的 x 坐标位置
y：在画布上放置图像的 y 坐标位置
width：可选。要使用的图像的宽度
height：可选。要使用的图像的高度
截图功能：sx、sy（截图图片的起始位置，左上角）
swidth、sheight（截图图片的宽高，此截图的宽高为实际图片的真实大小）
x、y（截图结果图片展示的左上角位置）
width、height（截图结果图片的宽高）
123456789101112131415
演示效果：
核心代码
思路：
1. 选择图片并获取图片信息
2. 渲染canvas
3. 监听canvas区域是否被连续点击 - 截图
4. 获取截图区域canvas
5. 绘制点击区域图片框
6. 动态生成a标签，利用其download属性，下载截图图片
重点方法
方法名
效果
资料
toDataURL（）
将canvas转化为base64
getImageData（）
保存canvas内容
putImageData（）
渲染保存的canvas内容
canvas截取裁剪图片并保存为base64（简化版参考）
//canvas画笔对象
var ctx = c.getContext("2d");
//首先先向canvas画布中绘制一张图片
var img = new Image();
img.src = "demo.png";
img.onload = function () {
//绘制图像
ctx.drawImage(this, 0, 0);
/** * 拷贝画布 * @param 拷贝原canvas起始点x坐标点 * @param 拷贝原canvas起始点y坐标点 * @param 拷贝图片的宽度 * @param 拷贝图片的高度 * @type {ImageData} */
let w = 300;
let h = 300;
var dataImg = ctx.getImageData(100, 100, w, h);
//声明一个新的画布,用来存放copy下的图片
var _canvas = document.createElement("canvas");
var _cxt = _canvas.getContext("2d");
_canvas.width = w
_canvas.height = h
/** * @param copy的图片 * @param 存放新位置的x坐标点 * @param 存放新位置的y坐标点 */
_cxt.putImageData(dataImg,0,0)
let base64 = _canvas.toDataURL('image/jpeg')
console.log(base64);
