相关疑难解决方法(0)
将HTML Canvas捕获为gif/jpg/png/pdf？
是否可以捕获或打印html画布中显示的图像或pdf？
我想通过画布生成一个图像,并能够从该图像生成一个png.
推荐指数
解决办法
查看次数
将HTML5 Canvas转换为要上传的文件？
标准HTML文件上载的工作方式如下:
<g:form method="post" accept-charset="utf-8" enctype="multipart/form-data"
name="form" url="someurl">
<input type="file" name="file" id="file" />
</form>
在我的情况下,我将图像加载到html5画布,并希望将其作为文件提交到服务器.我可以:
var canvas; // some canvas with an image
var url = canvas.toDataURL();
这给了我一个image/png作为base64.
如何将base64映像以与输入类型文件相同的方式发送到服务器？
问题是base64文件的类型与文件类型不同,后者位于input type ="file"中.
我可以以某种方式转换服务器类型相同的base64吗？
推荐指数
解决办法
查看次数
我有一个base64编码的png,如何将图像写入PHP中的文件？
当我使用base64编码时,PHP在创建图像文件(PNG)时的正确方法是什么？
我一直在玩:
file_put_contents('/tmp/'. $_REQUEST['id'].'.png', $_REQUEST['data']);
我需要解码吗？我应该使用gd库吗？
推荐指数
解决办法
查看次数
如何在不使用画布的情况下将整个div数据转换为图像并将其保存到目录中？
我已经在div中创建了我的数据(包含模板的图像,文本,标签等),现在我想将其转换为图像格式.是否有任何技术将特定的div内容转换为图像而不使用canvas.anybody plz帮助我!我想将整个"mydiv"内容转换为图像并将该图像保存到我的图像目录中,当我点击保存？
<html>
<header>
</header>
<body>
<label> Template Design</label>
<div id="mydiv">
<label> Good Morning</label>
<img src="mug.png" id="img1" height="100" width="100" />
</div>
<input name="save" type="button" value="SAVE" />
</body>
</html>
推荐指数
解决办法
查看次数
如何裁剪图像的任何选定区域并将其保存到服务器？
让我用图片总结一下情景:
我正在尝试制作一个功能,在我的网站中设置个人资料图片.我想有一个页面在图像字段中以原始大小显示上传的图像,但个人资料图片的大小应该是200*153所以我想要那个用户可以调整图片的大小,并将一帧(帧大小为200*153)拖动到调整大小的图片的任何区域,他们想要成为他们的个人资料图片,当他们点击保存按钮时,只需要在框架被歪曲并将该区域保存到服务器.
想象一下,这些是HTML代码:
<div style="height:150px;width:200px;position:absolute;border:5px solid yellow;z-index:1001;" id="test1"></div>
<img id="test" src="~/Content/01052013626.jpg"/>
请注意,div是可拖动的,图像可以调整大小.
谢谢.
推荐指数
解决办法
查看次数
HTML5 画布 - 将保存的图像分享到社交媒体
感谢您花时间阅读这篇文章。
我已经浏览了这个论坛上无数的帖子，但仍然无法实现我所追求的目标。
我创建了一个 html5 画布，用于保存用户的绘图和图像。当用户按下发布时，他/她将收到一个弹出框（灯箱）来预览她的图像，并可以选择使用Addthis.com在社交网络上共享图像。
这是我迄今为止所取得的成就。1. 在我的画布中，我有一个名为 #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 文件，或者 …
推荐指数
解决办法
查看次数
将文字放在图像上并另存为图像
我对HTML5 Canvas有一个问题.我有一张图片.在此图像上,我想放置文本并将其显示/保存为图像.
我有这个代码:
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 10, 10);
context.font = "20px Calibri";
context.fillText("My TEXT!", 50, 200);
};
imageObj.src = "mail-image.jpg";
};
这很好用.我的图像和文字都在上面.但它仍然是画布而没有图像.有谁能够帮我？
推荐指数
解决办法
查看次数
将画布图像保存到服务器
我正在尝试将画布图像保存到服务器.我可以保存文件,但它总是0字节.我的代码出了什么问题？
<script>
function test(){
var canvas = document.getElementById("cvs");
var dataURL = canvas.toDataURL();
$.ajax({
type: "POST",
url: "upload.php",
data: {
imgBase64: dataURL
}
}).done(function(o) {
console.log('saved');
});
}
</script>
PHP:
<?php
define('UPLOAD_DIR', 'uploads/');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>
推荐指数
解决办法
查看次数
使用 dataURL 和 Flask 将画布图像保存到服务器
我们正在尝试通过在网站上生成新图片来更改用户的个人资料图片。我们尝试通过从 HTML 代码创建画布来实现此目的，然后使用toDataURL函数通过发布包含此数据的表单（输入类型=\'file\'）将图片数据发送到服务器。
\n\n当我们从计算机中选择文件时它可以工作，但当尝试将图像数据（从画布）附加到表单时我们无法使其工作。
\n\n我已经找到了多种不完整的替代方案来解决如何做到这一点，但没有什么可以真正使其发挥作用。我们可能无法像我们那样设置输入值=imageData，但我们尝试了很多其他方法也不起作用，所以我们就这样保留它。
\n\n提供的代码可能会有帮助，但也可能有一个通用的解决方案。
\n\n最后，我们还是初学者，已经在网上搜索了整整两天的解决方案。我们找到了一些替代解决方案，但也无法使其完全发挥作用。非常感谢！
\n\n我们发现一些几乎有用的链接：
\n\n\n\n\n\n\n\n这是Python文件（my_app.py）
\n\nfrom flask import Flask, url_for, render_template, request, redirect\napp=Flask(__name__)\nfrom flask_uploads import UploadSet, configure_uploads, IMAGES\nphotos = UploadSet(\'photos\', IMAGES)\napp.config[\'UPLOADED_PHOTOS_DEST\'] = \'static/uploads\'\nconfigure_uploads(app, photos)\n\n@app.route(\'/abc_test/\', methods=["GET", "POST"])\ndef abc_test():\n if request.method==\'POST\':\n print("It is a POST request")\n try:\n print(request.form[\'PHOTO\'])\n except Exception as e:\n print((\'exception 1:\', e))\n try:\n print(request.files[\'PHOTO\'])\n except Exception as e:\n print((\'exception 2:\', e))\n …推荐指数
解决办法
查看次数
如何使用Javascript和Canvas在图像上添加文本
我需要使用javascript/jquery在现有图像上添加文本.我在下面解释我的代码.
<form name="billdata" id="billdata" enctype="multipart/form-data" novalidate>
<input name="text" id="txt" class="form-control" placeholder="Add Text" type="text" required>
<div class="col-md-6">
<img src="703960808_1011008937_images.png">
</div>
</form>
这里我有一个文本字段.当用户在该文本字段中写入内容时,它将写在该图像上,并且在表单提交时应该获取已编辑的图像.
推荐指数
解决办法
查看次数
发送canvas.toDataURL（）作为FormData
我正在尝试使用html2canvas将DOM元素呈现为.png图像，然后将其上传到服务器。这是我的代码：
import React, { Component, PropTypes } from 'react';
import html2canvas from 'html2canvas';
import axios from 'axios';
const sendScreenshot = (img) => {
const config = {
headers: {
'content-type': 'multipart/form-data'
}
}
let data = new FormData();
data.append('screenshot', img);
return axios.post('/api/upload', data)
}
export default class Export extends Component {
printDocument() {
const input = document.getElementById('divToPrint');
html2canvas(input).then(canvas => {
document.body.appendChild(canvas);
const imgData = canvas.toDataURL('image/png');
sendScreenshot(imgData)
});
}
...
我可以看到DOM元素已正确转换为图像，因为我可以看到它附加在页面上。
在node.js服务器端，我可以看到表单正在通过，但是“截屏”是作为文本字段而不是文件接收的。我正在使用multer，并且确认至少在使用Postman时，我可以正确接收和保存文件上传。
所以我想基本的问题是我需要指出我要附加到FormData的项是文件，而不是文本字段。但是我不知道该怎么做。我尝试使用带有三个参数的append，并尝试将imgData转换为如下所示的Blob：
const blob = new Blob([img], {type: 'image/png'});
但是结果并没有使我更接近我想要的。
推荐指数
解决办法
查看次数
fengyuanchen jQuery cropper插件 - 如何获得裁剪帆布
如何使用我自己的按钮裁剪图像？
我试着执行这个
var canvas = $selector.cropper('getCroppedCanvas')
但它返回空值.
有没有办法得到裁剪的帆布？如何将裁剪的画布数据放入<input type="file">值并将其发送到PHP？
推荐指数
解决办法
查看次数
图像正在下载铬,但不是在野生动物园
在我的应用程序中,我html2canvas用于将HTML转换为画布,之后我将使用toDataURL()chrome中的所有内容将该画布转换为图像,图像在页面加载后立即下载,但在safari中将图像加载到同一页面没有下载.
$(document).ready(function(e) {
html2canvas(document.body, {
onrendered: function(canvas) {
var test = document.getElementsByClassName('test'); //finding the div.test in the page
$(test).append(canvas); //appending the canvas to the div
var canvas = document.getElementsByTagName('canvas');
$(canvas).attr('id','test'); //assigning an id to the canvas
var can2 = document.getElementById("test");
var dataURL = can2.toDataURL("image/png");
document.getElementById("image_test").src = dataURL; //assigning the url to the image
$(canvas).remove(); //removing the canvas from the page
download(can2,'untitled.png');
function download(canvas_name,filename)
{
var tempLink = document.createElement('a');
e;
tempLink.download = filename;
tempLink.href = dataURL;
if …推荐指数
解决办法
查看次数