JavaScript复制图片和下载图片到本地

基本代码结构

<div className="html-canvas-wrap" ref={canvasWrap}><div className="html-canvas"><h3>标题</h3><p>标题描述</p><img src={TestImg} alt="" /></div><button onClick={handleCopy}>execCommend copy</button><button onClick={handleCopy2}>clipboard copy</button><button onClick={handleSave}>保存图片到本地</button>
</div>

该功能依赖 html2anvas

npm i -S html2canvas

复制图片

execCommand

经测试在大多数社交工具中粘贴不可用

 // 实现 handleCopy 方法const handleCopy = () => {html2canvas(document.querySelector('.html-canvas'), {height: 60,}).then((canvas) => {let imgUrl = canvas.toDataURL('image/png')const image = document.createElement('img')image.src = imgUrlimage.style.height = '60px'image.onload = function () {const selection = window.getSelection()if (selection.rangeCount > 0) {selection.removeAllRanges()}if (!document.queryCommandSupported('copy')) {console.log('浏览器不支持复制命令')return;}const range = document.createRange()range.selectNode(image)selection.addRange(range)document.execCommand('copy')selection.removeAllRanges()}canvasWrap.current.appendChild(image)})}

navigator.clipboard

可用但存在浏览器兼容性问题，主流浏览器中firefox和Safari兼容性不好

 // 实现handleCopy2 方法const getCanvas = (element) =>new Promise((resolve) => {if (canvasRef.current) {return resolve(canvasRef.current)}html2canvas(element, {useCORS: true,}).then((canvas) => {canvasRef.current = canvasresolve(canvas)})})const handleCopy2 = async () => {const canvas = await getCanvas(document.querySelector('.html-canvas'))canvas.toBlob(async (blob) => {const data = [new ClipboardItem({[blob.type]: blob,}),]navigator.clipboard.write(data).then(() => {console.log('Copied to clipboard successfully!')}).catch(() => {console.error('Unable to write to clipboard.')})})
}

保存图片到本地

 // 实现 handleSave 方法const handleSave = async () => {let canvas = await getCanvas(document.querySelector('.html-canvas'))const imgUrl = canvas.toDataURL('image/png')const aEle = document.createElement('a')aEle.download = 'download'aEle.href = imgUrlconst event = new MouseEvent('click')aEle.dispatchEvent(event)}

JavaScript复制图片和下载图片到本地相关推荐

python下载图片并保存_Python爬虫获取图片并下载保存至本地的实例
1.抓取煎蛋网上的图片. 2.代码如下: import urllib.request import os #to open the url def url_open(url): req=urllib. ...
Python利用bs4批量抓取网页图片并下载保存至本地
Python利用bs4批量抓取网页图片并下载保存至本地使用bs4抓取网页图片,bs4解析比较简单,需要预先了解一些html知识,bs4的逻辑简单,编写难度较低.本例以抓取某壁纸网站中的壁纸为例.(b ...
php img本地图片路径,php 替换文章中的图片路径,下载图片到本地服务器的方法
php 替换文章中的图片路径,下载图片到本地服务器 /** * 获取替换文章中的图片路径 * @param string $xstr 内容 * @param string $oriweb 网址 * @ ...
使用scrapy图片管道下载图片
前言 Scrapy是Python语言下一个十分流行的爬虫框架,本文不对Scrapy本身做详细介绍.有关Scrapy的安装可以参考官网的安装指南,不过本人更推荐使用Anaconda,Anaconda集成 ...
【python】根据pixiv网站的图片url下载图片到本地
写在前面 pixiv是著名的插画网站.如果我们通过爬虫技术得到了pixiv网站图片的url,那么如何根据url下载图片到本地. 安装模块 pip install requests 测试样例打开以下页 ...
Python爬虫：批量爬取变形金刚图片，下载保存到本地。
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理本文文章来自:CSDN 作者:Guapifang 其实和爬取普通数据本质一样,不过 ...
vue生成二维码图片并且下载图片到本地
一.安装生成二维码插件qrcode.js npm install --save qrcodejs2 二.封装组件: <template><div><div id=&quo ...
JavaScript点击按钮下载图片，涉及同源下载和跨域下载
以下内容适用于同源下载图片: 参考:https://blog.csdn.net/Thea12138/article/details/82801375 <button class="do ...
图片去水印下载-图片去水印哪个软件好用
目前有很多的去水印软件,今天小编要来为大家介绍的两款去水印软件,它不仅可以去除图片上的水印,视频上的水印也是可以去除的.而且操作起来也是非常的简单,即便是完全没有去水印经验的人,也能够快速上手.那么如 ...

JavaScript复制图片和下载图片到本地

JavaScript复制图片和下载图片到本地

复制图片

execCommand

navigator.clipboard

保存图片到本地

JavaScript复制图片和下载图片到本地相关推荐

最新文章

热门文章