如何在html页面动态生成图片然后分享至微博?

发布于 2022-09-02 01:28:38 字数 1164 浏览 13 评论 0

如题,需求:
我想要用户在点击页面上某个按钮后将页面里某个动态生成的DIV元素(包含用户相关信息)转为图片,然后分享至微博。
我的做法是这样的:

//html2canvas是html2canvas类库里的一个方法

var picURL;
html2canvas(document.getElementById("share"), {
                        allowTaint: true,
                        taintTest: false,
                        onrendered: function (canvas) {
                            var imgUrl = canvas.toDataURL();
                            var newImg = document.createElement("img");
                            newImg.src = imgUrl;
                            picURL= imgUrl;
                            document.body.appendChild(newImg);//测试用
                        }
                    });
                    
$("#link").attr("href","http://service.weibo.com/share/share.php?title=&url="+document.location+"&pic="+picURL).click();

结果浏览器显示400 bad request;
我看了下img的url

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAl4AAAE8CAYAAAAR9b9KAAAgAElEQVR4Xux9B5wdZdn9mXLv3bs9ye5mN72   

//后面省略六七百行。。。

我猜想可能原因有:
1 url太长
2 图片实际在客户端本地,URL传入分享参数里无效。

那么结果浏览器显示400 bad request的原因是什么?怎样解决这个需求呢?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

故事和酒 2022-09-09 01:28:38

首先,Get请求是把数据放置到了URL里面,那么浏览器对于URL的长度本身是有个限制的(不同浏览器在这个长度上大同小异),导致服务器反馈给你一个400(服务器无法理解该请求)。
个人对于这个问题的解决思路是,创建一个服务后端,通过AJAX技术,将生成出来的图片上传到服务器上储存为静态文件(文件名什么的可以根据时间啊、用户名啊之类的进行区分),然后将服务器上的图片地址作为POST请求的返回值,用一个json返回回来。
我刚刚简单看了一下新浪微博的分享接口,如果我没看错的话,分享图片是可以直接放置图片的URL的,题主可以研究一下这个思路的可行性。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文