• 周四. 12月 1st, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

给页面的图片加下载按钮

admin

11月 28, 2021
<img src="" /img>

<button onclick="handleDownloadClick">下载图片</button>
function handleDownloadClick() {
  var eleLink = document.createElement('a');
  eleLink.download = 你的文件名 + '.jpg';
  eleLink.style.display = 'none';

  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  var width = domI  mg.naturalWidth;
  var height = domImg.naturalHeight;
  canvas.width = width;
  canvas.height = height;
  context.drawImage(domImg, 0, 0);

  eleLink.href = canvas.toDataURL('image/jpeg');
  document.body.appendChild(eleLink);
  eleLink.click();
  document.body.removeChild(eleLink);
}

但是,当 img 图片的 url 跨域的时候,会在新窗口打开,chrome 并不执行下载,

需要给 img 标签加一个属性:crossOrigin

<img crossOrigin="anonymous" src="" />
.signature { background-color: lightskyblue; padding: 10px; display: inline-flex; border: 1px dashed red }
.emphersize { font-weight: bold; color: darkblue }

作者:码路工人

公众号:码路工人有力量(Code-Power)

欢迎关注个人微信公众号 Coder-Power

一起学习提高吧~

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注