js实现图片裁剪功能

写项目遇到了一个图片裁剪功能，网上搜了半天全是裁剪框，并不能达到实际意义的图片裁剪

它的实现过程主要是 canvas 的 putImageData() 方法

w3c给它的官方定义是：

putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。

demo:

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>js实现图片裁剪</title>
</head>
<body>
<input id="npt" type="file">
<br>
原图：<img id="original" src="" alt="">
裁剪后：<img id="later" src="" alt="">
</body>
<script>var canvas = document.createElement("canvas");// 创建canvas对象var ctx = canvas.getContext('2d');var original = document.querySelector("#original");var later = document.querySelector("#later");var clone = [{x:170,y:100},{xx:300,yy:520}];//x y为要裁剪的左上角的坐标，xx yy为右下角的坐标// 获取图片base64数据var npt = document.getElementById("npt");npt.onchange = function () {var reader = new FileReader();reader.readAsDataURL(npt.files[0]);reader.onloadend = function (e) {original.src = e.target.result;// console.log(e.target.result);// 图片的base64数据getImage(e.target.result)};};// 创建图片var getImage = function(b64){// 创建图片对象var image = new Image();image.src = `${b64}`;image.onload = function(){// 获取原图宽高var height = this.height;var width = this.width;//设置canvas大小与原图宽高一致canvas.height = height;canvas.width = width;// 在canvas绘制图片ctx.drawImage(this,0, 0,width,height);// 截图：drawRect();}};// 绘制截图矩阵var drawRect = function (){// 截图宽度var w = clone[1].xx - clone[0].x;// 截图高度var h = clone[1].yy - clone[0].y;// 获取截图区域内容,截图区域的像素点矩阵var cutImage = ctx.getImageData(clone[0].x,clone[0].y,w,h);// 裁剪后的base64数据var newImage = createNewCanvas(cutImage,w,h);later.src = newImage;// console.log(newImage);// 裁剪后的base64数据};//创建新的空白canvas画布将矩阵渲染截图var createNewCanvas = function (content,width,height){var nCanvas = document.createElement('canvas');var nCtx = nCanvas.getContext('2d');nCanvas.width = width;nCanvas.height = height;nCtx.putImageData(content,0,0);// 将画布上指定矩形的像素数据，通过 putImageData() 方法将图像数据放回画布return nCanvas.toDataURL('image/png');}
</script>
</html>

页面效果是这样的:

完。

各位看官有问题可以评论区或发邮件一起探讨，个人邮箱：dingjie0730mi@163.com

js实现图片裁剪功能相关推荐

图片裁剪功能集成优化
问题所在最近公司编辑在发布新闻的时候遇到一个问题,编辑后台提供的原有的图片裁剪功能在移动端和一些特定类型的显示时达不到具体的要求.最后去深究发现我们的服务器对上传上来的图片进行了一次裁剪,为了减小图 ...
如何正常使用ckeditor5图片裁剪功能
1 安装 npm install --save @ckeditor/ckeditor5-build-decoupled-document 2 引入 import CKEditor from '@cke ...
图片裁剪功能学习小结
图片裁剪功能学习小结近期有需要使用图片裁剪的功能,在使用插件和自己写裁剪组件之间犹豫了很久,后来根据需求经过反复的考虑,还是自己封装吧,毕竟自己动手,丰衣足食,对吧?嗯,??????是的!最后生成裁 ...
VUE图片裁剪功能vue-img-cutter
VUE图片裁剪功能vue-img-cutter 前言: 演示地址兼容IE9+,MSEdge,Chrome,Firefox 两种展现形式,行内或弹窗可旋转.缩放图片任意比例.大小裁剪固定比例.大 ...
js截取图片裁剪图片之cropper.js插件用法详解
js截取图片裁剪图片之cropper.js插件用法详解源码:https://github.com/fengyuanchen/cropper 引入+使用 <link href="/p ...
Android 图片裁剪功能实现详解（类似QQ自定义头像裁剪）
原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责任.http://mzh3344258.blog.51cto.com/1823534/808837 ...
微信小程序图片裁剪功能的实现
文章目录图片上传与处理图片尺寸适配图片显示与裁剪框裁剪框的拖动与缩放增加canvas并裁剪图片保存图片到相册总结在之前的博文中,已经介绍了如何使用在前端开发中,实现较方便自由的图片裁剪 ...
头像上传和图片裁剪功能(cropper.js)
<template><div class="user-profile"><input type="file" name=" ...
EPUB.js 解决图片裁剪问题(缩放问题)
在EPUB.js中,如果需要实现自动缩放,通过添加smartimages.js就可以实现图片自动缩放了,经过研究smartimages.js,发现,他可以是实现图片的缩放,但只能实现图片比需要显示的空 ...

js实现图片裁剪功能

各位看官有问题可以评论区或发邮件一起探讨，个人邮箱：dingjie0730mi@163.com

js实现图片裁剪功能相关推荐

最新文章

热门文章