js base64编码格式图片另存为下载

需求

网页中 base64编码过的图片,点击某按钮下载此图片

<img class="barcode" src="data:image/jpg;base64,base64编码">

风来了.fox

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>js base64编码格式图片另存为下载-风来了.fox</title>
</head>
<body>
<a id="tttt"></a>
<h2>图片</h2>
<p><img id="ringoImage" alt="" src="图片BASE64,在最下面找,替换本src"/></p>
<div><a onclick="down()" href="javascript:void(0);">下载图片</div>
<script src="/Public/static/jquery.min.js"></script>
<script>
/**
 * 根据图片生成画布
 */
function convertImageToCanvas(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);
    return canvas;
}
/**
 * 下载图片
 */
function down() {
    var sampleImage = document.getElementById("ringoImage"),
    canvas = convertImageToCanvas(sampleImage);
    url = canvas.toDataURL("image/png");//PNG格式
    //以下代码为下载此图片功能
    var triggerDownload = $("#tttt").attr("href", url).attr("download", "order-1111111111.png");
    triggerDownload[0].click();
//    triggerDownload.remove();
}
</script>
</body>
</html>

把图片base64编码放到 ringoImage 中的src中

data:image/png;base64,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

参考
http://www.webhek.com/post/convert-canvas-image.html
http://www.2cto.com/kf/201404/293481.html

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风.foxwho

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值