共计 1245 个字符，预计需要花费 4 分钟才能阅读完成。
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、实现成果
正文完
