js实现点击保存图片

js实现点击保存图片
html:

<img style="-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;" src="{$shareloan}" width="90%" id="testImg">

 <span id="saveImg" οnclick="save()" style="margin-bottom:.6rem;margin-top:.6rem;">保存图片</span>

js:

function save() {

    var img = document.getElementById("testImg");

    var alink = document.createElement("a");

    alink.href = img.src;

    alink.click();

}

效果图:

更多技术问题,可前往:http://sucai.gxyourui.cn/Home/Article/blog.html

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
由于安全原因,JavaScript 无法直接保存图片到相册,需要借助浏览器的 API。以下是在浏览器中使用 JavaScript 保存图片到相册的步骤: 1. 创建一个 Image 对象,设置图片的 src 属性为需要保存的图片的地址。 ```javascript var img = new Image(); img.src = 'https://example.com/image.jpg'; ``` 2. 等待图片加载完成,确保图片加载完成后才能进行下一步操作。可以使用 onload 事件来判断图片是否加载完成。 ```javascript img.onload = function() { // 图片加载完成后的操作 }; ``` 3. 创建一个 Canvas 对象,并将图片绘制到 Canvas 上。 ```javascript var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, img.width, img.height); ``` 4. 调用 Canvas 对象的 toDataURL 方法获取图片的 Base64 编码字符串。 ```javascript var base64 = canvas.toDataURL('image/jpeg', 1); ``` 5. 创建一个 a 标签,设置 href 属性为 Base64 编码字符串,并设置 download 属性为保存的文件名。 ```javascript var link = document.createElement('a'); link.href = base64; link.download = 'image.jpg'; ``` 6. 将 a 标签添加到文档中,并模拟点击 a 标签触发下载。 ```javascript document.body.appendChild(link); link.click(); document.body.removeChild(link); ``` 完整的代码如下: ```javascript var img = new Image(); img.src = 'https://example.com/image.jpg'; img.onload = function() { var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, img.width, img.height); var base64 = canvas.toDataURL('image/jpeg', 1); var link = document.createElement('a'); link.href = base64; link.download = 'image.jpg'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; ```
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值