html2canvas保存图片 微信分享

最新推荐文章于 2024-07-02 10:13:04 发布
最新推荐文章于 2024-07-02 10:13:04 发布
阅读量7.1k 收藏 7
点赞数 1
分类专栏： 前端 工具 文章标签： html2canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuzhiqiang_1/article/details/79213329
版权

1. 截图.html

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>html2canvas</title>
    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
</head>
<script type="text/javascript">
function takeScreenshot() {
    html2canvas(document.getElementById('body'), {
        onrendered: function(canvas) {
            document.body.appendChild(canvas);

// 这个url是base64码  只有用服务启动后toDataURL()才可以正常使用
var url = canvas.toDataURL();


/**
* 注意: 下载效果放开1  分享放开2
*/

// 1.PC下载图片   手机UC不好用(直接下载base64码，暂时没找到解决方案)
/*var triggerDownload = $("<a>").attr("href", url).attr("download", "邀请函.png");  
triggerDownload[0].click();  
triggerDownload.remove(); */

// 2.这个是微信分享
/*Wechat.share({
message: {
title: "Hi, there",
description: "This is description.",
thumb:url,
mediaTagName: "TEST-TAG-001",
messageExt: "这是第三方带的测试字段",
media: {
type:Wechat.Type.IMAGE,
image:url
}
},
scene: Wechat.Scene.SESSION   // share to Timeline//Wechat.Scene.TIMELINE 表示分享到朋友圈  //Wechat.Scene.SESSION 表示分享给好友


}, function () {
alert("Success");
}, function (reason) {
alert("Failed: " + reason);
});*/

        },
width: 1000,
height: 700
    });
}
</script>
<body id="body">
<a href="12345679">123456</a>
    <div id="view" style="background:url(test.jpg) 50%; width: 1000px;height: 700px;">
        <input type="button" value="截图" οnclick="takeScreenshot()">
    </div>
</body>
</html>


2. 图片命名为test.jpg

3. 分享需要 cordova.js、cordova_plugins.js


爱我你会火_
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue 使用html2canvas保存图片
pureszgd的博客
02-15 1457
vue 使用html2canvas保存图片 ref="imageWrapper" import html2canvas from 'html2canvas'; html2canvas(this.$refs.imageWrapper,{ backgroundColor: null }).then((canvas) =&gt; { let dataURL = canvas.toDataURL(...
使用 html2canvas 将页面保存成图片
allen_csdns的博客
12-06 3413
有时我们需要实现在浏览器端直接对整个或部分页面进行截屏，比如移动端常见的“长按网页保存为图片”功能。这个借助 html2canvas 这个第三方 js 库即可实现，下面通过样例演示其如何使用。 一、基本介绍 1，什么是 html2canvas html2canvas 可以通过获取 HTML 的某个元素，然后生成 Canvas，从而让用户保存为图片。 html2canvas 工作原理是将当页面渲染成...
H5页面使用html2canvas实现div生成为图片，保存到手机
YL
02-07 6412
在做微信公众号H5页面时，需求要求html页面生成base64图片，并保存到手机相册中。之前没做过，在网上搜了相关的资料。了解到了html2canvas.js。 html2canvas首先将页面生成canvas画布，然后转换成base64图片。最后长按图片保存到手机相册。 这是效果图，接下来我们看代码。 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equ
h5基于html2canvas实现保存图片到手机相册
angela_ice的博客
03-28 1385
通过html2canvas实现保存图片到手机相册
html2canvas 实现页面截图并自动下载功能
最新发布
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
07-02 364
截图出来的是白屏，首先确认useCORS为true，如果是截屏地图可以参考下。useCORS false 是否尝试使用CORS从服务器加载图像。logging true 为调试目的启用日志记录。allowTaint false 是否允许跨源图像污染画布。
uniapp微信H5 dom转换成图片并下载（html2canvas ）
m0_49083276的博客
12-28 1446
由于微信安全防控，我们无法直接生成并下载，但是可以打开图片后长按保存。
html2canvas保存图片
Summer_JK的博客
03-04 1051
html2canvas保存图片
【微信H5开发】基于html2canvas实现（图文组合）图片长按即可保存（简单处理）
yxk17668的博客
11-09 4989
鉴于当前开发的功能比较简单 所以这里只涉及html5的canvas来实现功能，所以没有涉及很深的功能开发 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&am
使用html2Canvas将页面转化为canvas图片，最后长按保存到本地，史上最全 html2canvas 使用 踏坑之旅，没有之一
鹤汀凫渚 的博客
12-18 2913
史上最全 html2canvas 使用 踏坑之旅，没有之一
html2canvas生成的图片无法长按保存的问题，weixin中无法保存canvas生成的图片问题
haliboti的博客
11-04 1370
html2canvas生成的图片无法长按保存的问题： 需要生成的图片路径是base64的格式才能够保存成功，转换成path格式无法保存 html2canvas将网页生成图片的方法请看：页面转换为图片保存到手机html2canvas、base64ToPath_haliboti的博客-CSDN博客页面转换为图片保存到手机html2canvas、base64ToPath本人只解决了 html2canvas、base64ToPath的引入问题，本文章解决方案并不完整完整示例请参考uni-app 中使用 html
前端使用 html2canvas 插件实现保存图片功能
yyanglirong的博客
01-03 730
html2canvas插件
js生成图片_html2canvas - 动态生成微信分享海报的优质js库
weixin_39518530的博客
12-03 366
如何把网页上的内容用javascript来实现截图？今天分享的html2canvas就可以。介绍在微信项目中经常会遇到动态生成海报的需求，Web前端合成图片往往会使用canvas。canvas虽然强大，但用来合成海报非常繁琐，一不小心就几百行代码了。而html2canvas.js是一款轻松地将HTML+CSS写成的布局直接转换成canvas，生成可保存分享的图片。特点兼容现代浏览器，手机项目可放心...
html2canvas将网页保存成图片
10-23
html2canvas将网页保存成图片：用法如下， html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas); });
html静态页实现微信分享显示标题、摘要图片等信息，php版本的demo
03-13
php程序实现在静态页分享内容到朋友圈，显示标题、摘要图片等信息。
html2canvas实现将dom生成图片并保存至本地
03-29
使用html2canvas实现图片截图并保存至本地或在页面中以canvas的方式渲染
html2canvas.js 长按页面保存为图片的功能实现
10-09
html2canvas.js 长按页面保存为图片的功能实现html2canvas.js 长按页面保存为图片的功能实现html2canvas.js 长按页面保存为图片的功能实现html2canvas.js 长按页面保存为图片的功能实现html2canvas.js 长按页面保存为图片的功能实现html2canvas.js 长按页面保存为图片的功能实现
微信浏览器 图片双手滑动伸缩 直接保存
06-17
大家做微信开发的时候肯定遇到过，要在微信的浏览器实现像app相册那样的功能，其实微信浏览器内嵌了一些js，有一个WeixinJSBridge的类，里面封装了很多js方法，这是其中之一。大家可以直接使用
微信小程序之html5 canvas绘图并保存到系统相册
11-21
在微信小程序中，HTML5的Canvas API被广泛用于图形绘制和图像处理。在这个场景中，开发者需要实现一个功能，即用户可以通过Canvas绘制图形，并将结果保存到系统的相册。以下是一些关键知识点： 1. **Canvas绘图**：...
微信小程序使用html2canvas
06-02
可以使用第三方库wxhtml2canvas实现微信小程序中的html2canvas功能。该库基于html2canvas开发，支持在微信小程序中使用。 使用步骤如下： 1. 安装wxhtml2canvas库 在微信开发者工具中，打开项目根目录，选择“工具”->“构建npm”，等待构建完成后，在“miniprogram_npm”目录下将生成“wxhtml2canvas”文件夹。 2. 在需要使用html2canvas的页面中引入wxhtml2canvas库 ```javascript const wxhtml2canvas = require('wxhtml2canvas'); ``` 3. 调用wxhtml2canvas库中的方法生成canvas图片 ```javascript wxhtml2canvas.html2canvas(document.querySelector("#content"), { onrendered: function (canvas) { // 将canvas转换成图片并保存到本地 wx.canvasToTempFilePath({ canvas: canvas, success: function (res) { console.log(res.tempFilePath); } }) } }); ``` 其中，第一个参数为需要生成canvas的HTML元素，第二个参数为配置项，可以设置生成图片的大小、背景颜色等。 需要注意的是，由于小程序的安全限制，生成的图片只能保存到本地，无法直接上传到服务器。如果需要上传到服务器，可以使用小程序的文件上传API将图片上传到服务器。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值