H5頁面生成圖片
???shareimg()?{
??????let?self?=?this;
??????var?shareContent?=?document.getElementById("report-box");
??????var?width?=?shareContent.offsetWidth;?//獲取dom?寬度
??????var?height?=?shareContent.offsetHeight;?//獲取dom?高度
??????var?canvas?=?document.createElement("canvas");?//創(chuàng)建一個canvas節(jié)點(diǎn)
??????var?scale?=?2;?//定義任意放大倍數(shù)?支持小數(shù)
??????canvas.width?=?width?*?scale;?//定義canvas?寬度?*?縮放
??????canvas.height?=?height?*?scale;?//定義canvas高度?*縮放
??????//?canvas.getContext("2d").scale(scale,?scale);?//獲取context,設(shè)置scale
??????var?opts?=?{
????????scale:?scale,?//?添加的scale?參數(shù)
????????canvas:?canvas,?//自定義?canvas
????????//?logging:?true,?//日志開關(guān)芯肤，便于查看html2canvas的內(nèi)部執(zhí)行流程
????????width:?width,?//dom?原始寬度
????????height:?height,
????????useCORS:?true,?//?【重要】開啟跨域配置
??????};
??????html2canvas(shareContent,?opts).then(function?(canvas)?{
????????var?context?=?canvas.getContext("2d");
????????//?【重要】關(guān)閉抗鋸齒
????????context.mozImageSmoothingEnabled?=?false;
????????context.webkitImageSmoothingEnabled?=?false;
????????context.msImageSmoothingEnabled?=?false;
????????context.imageSmoothingEnabled?=?false;
????????//?【重要】默認(rèn)轉(zhuǎn)化的格式為png,也可設(shè)置為其他格式
????????let?canvasdata?=?canvas.toDataURL("image/png");
????????//?canvasdata?=?canvasdata.replace("image/png","image/octet-stream");
????????uni.showToast({
??????????title:?"圖片獲取成功,請長按圖片保存沪斟！",
????????});
????????self.imageurl?=?canvasdata;
????????self.imageheight?=?canvas.height?*?(1?/?scale)?*?0.8?+?"px";
????????self.imageflag?=?true;
????????setTimeout(function?()?{
??????????var?selectquery?=?uni.createSelectorQuery();
??????????console.log(selectquery.select(".imagebox"));
??????????selectquery
????????????.select(".imagebox")
????????????.boundingClientRect((data)?=>?{
??????????????self.blockboxheight?=?data.height;
????????????})
????????????.exec();
????????},?0);
}
并且需要配置一個idv
寫的比較簡陋侦锯，這個可以把你當(dāng)前頁面所有的內(nèi)容都生成一張長圖。
歡迎留言討論哈藕畔，比較也是小白一枚衔蹲！
