鏈夋湅鍙嬪湪寮€鍙戔€滅函鍓嶇涓嬭浇鍥剧墖鈥濆姛鑳芥椂閬囧埌杩囦互涓嬪満鏅悧锛?.涓嬭浇涓€涓凡鏈夌殑鍥剧墖2.涓嬭浇涓€涓厓绱犵殑鍐呭鍒嗕韩浠ヤ笂闂鐨勮В鍐虫柟娉曚笅杞戒竴涓凡鏈夌殑鍥剧墖锛氫娇鐢╟anvas缁樺埗锛屼笅杞戒竴涓猼agexportfunctiondownloadImg(imgUrl:string,imgTitle:string){varimg=鏂板浘鍍忥紙锛夛紱img.src=imgUrl;//蹇呴』璁剧疆锛屽惁鍒檆anvas涓殑鍐呭鏃犳硶杞寲涓篵lobimg.setAttribute('crossOrigin','Anonymous');img.onload=function(){varcanvas=document.createElement('canvas');canvas.width=img.width;canvas.height=img.height;璁ヽtx:any=canvas.getContext('2d');//灏唅mg涓殑鍐呭缁樺埗鍒扮敾甯冧笂ctx.drawImage(img,0,0,canvas.width,canvas.height);//灏嗙敾甯冨唴瀹硅浆鎹负Blobcanvas.toBlob(blob=>{//灏哹lob杞崲涓哄悓婧恥rlvarblobUrl=window.URL.createObjectURL(blob);//鍒涘缓涓€涓摼鎺ara=document.createElement('a');a.href=blobUrl;a.download=imgTitle||'涓嬭浇鍥剧墖';//璁剧疆鍥剧墖鍚嶇О//瑙﹀彂閾炬帴鐐瑰嚮浜嬩欢锛屾祻瑙堝櫒寮€濮嬩笅杞芥枃浠禷.click();});};}涓嬭浇涓€涓厓绱犵殑鍐呭锛氫娇鐢╤tml2canvas鎻掍欢鎴浘锛屼竴涓猼ag涓嬭浇瀹樼綉锛歨ttp://html2canvas.hertzen.com///importhtml2canvasimporthtml2canvasfrom'html2canvas';//涓嬭浇鍑瘉鎸夐挳constdownLoadBtn=()=>{//鑾峰彇dom鑺傜偣constdownLoadDom:any=document.getElementById("downLoadDom");html2canvas(downLoadDom,{瀹藉害:downLoadDom.offsetWidth,楂樺害:downLoadDom.offsetHeight,姣斾緥:2,}).then((canvas)=鈥嬧€?{constimgBase64=canvas.toDataURL('image/png');downLoadMethod(imgBase64);});}//涓嬭浇鍥剧墖constdownLoadMethod=(url:any)=>{varoA=document.createElement("a");oA.download='涓嬭浇鍥剧墖';oA.href=url;oA.className="downLoad"document.body.appendChild(oA);oA.click();oA.remove();}娉ㄦ剰馃摙html2canvas鍥剧墖璺ㄥ煙闂锛屽弬鑰冩枃妗ttps://blog.csdn.net/qq_3890...闄勪笂base64鍥剧墖杞琭ormData骞朵笂浼犵殑鏂规硶//convertbase64鍥惧儚鍒癴ormDataformData骞朵笂浼犲鍑哄紓姝ュ嚱鏁皌ransferBase64ToImg(base64String:any){varbytes=window.atob(base64String.split(',')[1]);鍙橀噺鏁扮粍=[];for(vari=0;i
