JSFiddle - React, Tailwind, and code Playground

by 0326

HTML

<canvas id="J_Canvas" width="200" height="100"></canvas>
<a id="J_Dld" href="这里替换成图片" download="文件名">下载图片</a>

CSS

canvas {
  border: 10px solid #000;
}
a {
  display: block;
}

JavaScript

let $canvas = document.getElementById('J_Canvas')
let $dld = document.getElementById('J_Dld')
let ctx = $canvas.getContext('2d')
let img = new Image()

img.src = '/img/[email protected]'
img.onload = () => {
  ctx.drawImage(img, 0, 0)
}

document.getElementById('J_Dld').addEventListener('click', (e) => {
  let imgData = $canvas.toDataURL('image/png')
  $dld.href = imgData.replace('image/png', 'image/octet-stream')
  $dld.download = 'jsfiddle.png'
})