生成图片插件 -> html2canvas

最近做h5项目好多都需要用到将页面生成图片,可长按保存,实现这个功能用到一个插件html2canvas.js。

项目中引用该插件,在js中编写如下代码:

html2canvas($(".p3").get(0)).then(canvas => {
    //执行拍照
    //document.body.appendChild(canvas);
    // 图片导出为 png 格式
    var type = 'image/png';
    var imgData = canvas.toDataURL(type);
    $(".p3-save-img").attr('src', imgData);
});

$(".p3").get(0)为生成图片区域;$(".p3-save-img")为图片保存位置。

插件下载戳这 -> https://pan.baidu.com/s/1EANWimes5eGexcRFMq3R3w

提取密码:5sf1

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在uni-app中使用html2canvas生成图片的步骤如下: 1. 首先,在你的uni-app项目中安装html2canvas插件。可以使用以下命令进行安装: ```shell npm install html2canvas ``` 2. 在你的代码中引入html2canvas,并编写生成图片的方法。可以参考以下代码: ```javascript <script lang="renderjs" module="canvasImage"> import html2canvas from 'html2canvas' export default { methods: { generateImage(e, ownerFun) { ownerFun.callMethod('_showLoading', '正在生成图片') setTimeout(() => { const dom = document.getElementById('pagePoster') html2canvas(dom, { width: dom.clientWidth, height: dom.clientHeight, scrollY: 0, scrollX: 0, useCORS: true, }).then((canvas) => { ownerFun.callMethod('receiveRenderData', canvas.toDataURL('image/png')) }).catch(err => { ownerFun.callMethod('_errAlert', `【生成图片失败,请重试】${err}`) }) }, 300) } } } </script> ``` 在上面的代码中,我们通过调用`html2canvas`函数来生成图片。需要传入一个DOM节点作为参数,这里使用`document.getElementById('pagePoster')`来获取需要生成图片的节点。生成成功后,可以通过`canvas.toDataURL('image/png')`获取图片的base64位的URL。 3. 在需要生成图片的地方调用`generateImage`方法。可以参考以下代码: ```html <button @click="generateImage">生成图片</button> ``` 在上面的例子中,我们将生成图片的方法绑定在按钮的点击事件上。 通过以上步骤,你就可以在uni-app中使用html2canvas生成图片了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [小程序 uniapp中webview内嵌H5页面 html2canvas截图 base64的图片保存到手机相册](https://blog.csdn.net/M__O__M/article/details/126985611)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [uni-app 中使用 html2canvas 生成图片(支持多端)](https://blog.csdn.net/weixin_42779803/article/details/118384426)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值