canvas 图片画圆 生成blob base64 (透明)

html

<canvas id="canvas" width="596" height="596"></canvas>

JS

const round = () => {
 return new Promise((reslove,error)=>{
	 const canvas = document.querySelector("#canvas"), image = new Image();
	 image.setAttribute("crossOrigin",'anonymous') // 跨域
	 const context = canvas.getContext("2d");
	 image.src = "http://192.168.31.29:8000/209.png";
	 image.onload = function() {
		context.arc(298, 298, 298, 0, 2 * Math.PI);
		context.clip()
		context.drawImage(image, 0, 0, 596, 596);
		let base64 = canvas.toDataURL('image/png');
		let blob = dataURLtoBlob(base64)
		reslove(blob);
	 };
 })
};

// base64 生成图片
const dataURLtoBlob = (dataurl) => {
	  var arr = dataurl.split(','); 
          var nameTime = new Date().getTime();   //不重名
	  var _arr = arr[1].substring(0,arr[1].length-2);
	  var mime = arr[0].match(/:(.*?);/)[1],
		  bstr =atob(_arr),
		  n = bstr.length,
		  u8arr = new Uint8Array(n);
	  while (n--) {
		  u8arr[n] = bstr.charCodeAt(n);
	  }
	  return new Blob([u8arr], {
		  type: mime
	  });
          //转成file对象
          //return new File([u8arr],`${nameTime}.png`,{type: mime})
  };