感谢您花时间阅读这篇文章。
我翻遍了这个论坛上无数的帖子，但仍然无法实现我想要的。
我创建了一个用于保存用户绘图和图像的 html5 Canvas 。 当用户按下发布时，他/她将收到一个弹出框(灯箱)的提示 预览她的图像，可以选择使用 Addthis.com. 在社交网络上分享图像
这就是我到目前为止所取得的成就。 1. 在我的 Canvas 中，我有一个名为#btnPreview 的按钮
$("#btnPreview").click(function (event) {
canvas.deactivateAll();
var strDataURI = canvas.toDataURL("png");
var proporcao = 1;
var proporcaoW = 500 / canvas.width;
var proporcaoH = 400 / canvas.height;
if (proporcaoW < proporcaoH) {
proporcao = proporcaoW;
} else {
proporcao = proporcaoH;
}
$("#addthis_shareable").width(canvas.width * proporcao).height(canvas.height * proporcao).attr("src", strDataURI);
// $("#imgPreview").width(canvas.width*proporcao).height(canvas.height*proporcao).attr("src", strDataURI);
$("#modalPreview").modal("show");
});
打开灯箱弹出窗口。
- 图像存储在
<img id"imgPreview" src"data:image/png;base64,....">中 当我尝试在 facebook、twitter 等上分享带有描述的图像时，它不起作用。
我知道这是什么问题，但无法创建此任务所需的 javascript 和 php 脚本。
我想要实现的是向这个论坛询问这个概念的最佳实践。
我的想法是创建一个 save.Php 脚本来保存 .png 文件，而无需在服务器上提示或创建虚假 url www.example.com/image.png当我按下 #btnPreview
一旦弹出窗口加载我的 img url 将是
<img id"imgPreview" src"www.example.com/images/md5_timestamp.png">
这是我找到的封闭示例
Example 1 that leads to example 2
Example 2 save base64
Example 3 Saving canvas as JPG or PNG
Example 4 Very Close to what am after - The bottom answer
我希望我解释正确。
期待您的回复。
最佳答案
检查这个: Fabric.js canvas.toDataURL() sent to PHP by Ajax 如您所见，您可以发送 Canvas 的 PNG base64 数据并在服务器端用 PHP 生成图像。 这是您可以在服务器端的 PHP 中使用的代码: https://gist.github.com/rodrigopandini/2149853
关于php - HTML5 canvas - 将保存的图像分享到社交媒体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14847757/