1、需要
想实现魔法棒性能;须要实现图片的 Canvas 像素级别的复制性能;
2、实现代码
<!--
* @Author: ArdenZhao
* @Date: 2022-01-18 14:09:54
* @LastEditors: Do not edit
* @LastEditTime: 2022-02-16 18:55:42
* @FilePath: /magic_wand/demo/8、canvasCopy.html
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Image</title>
</head>
<body>
<h2>Canvas Image</h2>
<div>
<div class="inputoutput">
<canvas id="canvasOutput" width="1600" height="660"></canvas>
<div class="caption">canvasOutput</div>
</div>
</div>
<script type="text/javascript">
// 获取 canvas 标签
let canvasElement = document.getElementById('canvasOutput');
let ctx = canvasElement.getContext('2d');; //2. 获取 2D 上下文
//3. 新建一个 Image 对象
var img = new Image();
//4. 设置 Image 的 src
img.src = 'https://t7.baidu.com/it/u=2397542458,3133539061&fm=193&f=GIF';
img.crossOrigin = "Anonymous";
let imageWidth = 0
let imageHeight = 0
let imageData = {} // 原始图像数据
img.onload = () => {
imageWidth = canvasElement.width / 2
imageHeight = canvasElement.height / 2
ctx.drawImage(img, 0, 0, imageWidth, imageHeight);// 将解决的过的数据显示在新的地位
imageData = ctx.getImageData(0, 0, imageWidth, imageHeight); // 复制到 Canvas 的像素信息
}
// 4、获取到 Canvas 点击的坐标
canvasElement.addEventListener('click', (e) => {let clone = new ImageData(new Uint8ClampedArray(imageData.data), imageWidth, imageHeight)
ctx.putImageData(clone, 0, imageHeight + 20); // 将解决的过的数据显示在原来的地位
}, false);
</script>
</body>
</html>
3、实现成果