个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
上传.html
<input type="hidden" name="forearmleft" id="forearm" value="">
<input type="hidden" name="elbotxt" id="elbotxt" value="">
<input type="hidden" name="rightall" id="rightall" value="">
<!--<img src="" id="elbotxt">-->
</form>
<canvas id="c"></canvas>
<canvas id="mr_rotator_can" width="436" height="567"></canvas>
<canvas id="f6258182013" width="436" height="567"></canvas>
用于上传并将 blob url 转换为 dataurl 的脚本文件
var source, source_ctx, sleeve, sleeve_ctx, finalsleeve, finalsleeve_ctx, temp_can1, temp_can1_ctx;
function forearmleftcurve(event){
var getImagePath = URL.createObjectURL(event.target.files[0]);
console.log(getImagePath)
temp_can1 = document.getElementById('f6258182013');
temp_can1_ctx = temp_can1.getContext('2d');
forearmleftrotator(getImagePath, '77');
// draw_on_cloth("f6258182013", '/image/1j8Dw.png', "mr_rotator_can", "img_fastening1a");
};
function forearmleftrotator(var2, var3) //var2=image aka pattern var3= angle for rotate
{
var mr_rotator_var = document.getElementById('mr_rotator_can');
var mr_rotator_var_ctx = mr_rotator_var.getContext("2d");
mr_rotator_var.width = mr_rotator_var.width;
var imageObj_rotator = new Image();
console.log(mr_rotator_var.toDataURL());
imageObj_rotator.onload = function () {
var pattern_rotator = mr_rotator_var_ctx.createPattern(imageObj_rotator, "repeat");
mr_rotator_var_ctx.fillStyle = pattern_rotator;
mr_rotator_var_ctx.rect(0, 0, mr_rotator_var.width, mr_rotator_var.height);
mr_rotator_var_ctx.rotate(var3 * Math.PI / 180);
mr_rotator_var_ctx.fill();
};
imageObj_rotator.src = var2;
//**blob to dataURL**
function blobToDataURL(blob, callback) {
var a = new FileReader();
a.onload = function(e) {callback(e.target.result);}
a.readAsDataURL(event.target.files[0]);
console.log(event.target.files[0])
}
test:
blobToDataURL(var2, function(dataurl){
console.log(dataurl);
});
我面临的问题是我正在获取 dataUrl，但它是原始图像而不是上传的图像。上传的图像比原始图像旋转一个。
请帮助我。旋转图像位于 var2 中。
最佳答案
您可以使用toDataURL()方法从canvas获取数据url。我稍微修改了您的代码，添加了一个将数据 url 呈现为图像的示例。
var source, source_ctx, sleeve, sleeve_ctx, finalsleeve, finalsleeve_ctx, temp_can1, temp_can1_ctx;
var imageHolder = document.getElementById('imageHolder');
var fileInput = document.getElementById('forearm');
fileInput.addEventListener('change', forearmleftcurve);
function forearmleftcurve(event){
var getImagePath = URL.createObjectURL(event.target.files[0]);
temp_can1 = document.getElementById('f6258182013');
temp_can1_ctx = temp_can1.getContext('2d');
forearmleftrotator(getImagePath, '77');
}
function forearmleftrotator(var2, var3){
var mr_rotator_var = document.getElementById('mr_rotator_can');
var mr_rotator_var_ctx = mr_rotator_var.getContext("2d");
mr_rotator_var.width = mr_rotator_var.width;
var imageObj_rotator = new Image();
imageObj_rotator.src = var2;
imageObj_rotator.onload = function () {
var pattern_rotator = mr_rotator_var_ctx.createPattern(imageObj_rotator, "repeat");
mr_rotator_var_ctx.fillStyle = pattern_rotator;
mr_rotator_var_ctx.rect(0, 0, mr_rotator_var.width, mr_rotator_var.height);
mr_rotator_var_ctx.rotate(var3 * Math.PI / 180);
mr_rotator_var_ctx.fill();
imageHolder.src = mr_rotator_var.toDataURL();
};
}
//**blob to dataURL**
function blobToDataURL(blob, callback) {
var a = new FileReader();
a.onload = function(e){
callback(e.target.result);
}
a.readAsDataURL(event.target.files[0]);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Canvas</title>
</head>
<body>
<img id="imageHolder" src="" alt="">
<form>
<input type="file" name="forearmleft" id="forearm" value="">
<input type="hidden" name="elbotxt" id="elbotxt" value="">
<input type="hidden" name="rightall" id="rightall" value="">
</form>
<canvas id="c"></canvas>
<canvas id="mr_rotator_can" width="436" height="567"></canvas>
<canvas id="f6258182013" width="436" height="567"></canvas>
</body>
</html>关于javascript - 如何获取上传图片的DataUrl？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43862153/
26
4
0
我有一个来自显示我的网络摄像头的 Canvas 的 DataURL。我使用 Matt 在这里的回答将这个 dataURL 变成一个 blob:How to convert dataURL to fil
我正在尝试使用davidshimjs/qrcodejs生成QR码与下面的代码。但是，当我尝试生成 DataURL 时，它给出以下错误: 类型错误:document.getElementById(...
我创建了一个将图像的 DataURI 存储在本地存储中的函数。 数据完美地存储在本地存储中，但如果我尝试从函数(即 return 语句)中获取值，则会得到“未定义”值。可能该函数甚至在转换为 data
我正在尝试从网页打印动态生成的 PDF。 var $iframe = $(''); $iframe.appendTo('body'); $iframe.load(function() { va
我正在运行根据 html5 Canvas 上的绘图查找事件触发器的代码。一旦停止绘制，它就会将 dataURL 发送到输入字段。从那里我将 dataURL 保存到数据库中。 这适用于以下情况: 运行“
我有这个对象: {dataURL: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwA…r/wALbpMM7gAAAANJREFUQ9S2TEBrm
我正在制作一个上传脚本，但我坚持从“addfile”事件的“file”获取dataURL，这是我的代码: $(function() { var dropzone = new Dropzone(
嗨，我有这段代码，可以将 dataURL 发送到 php 并将其保存到服务器。 JS: function addFormText(){ $('body').append(''); } function
我有一个由用户编辑的 Canvas (一些拖放内容)，上面有一些以文本形式打印的说明。我想保存没有该文本的图像。 我正在使用 KeneticJS。大小始终相同，并且文本位于图像的底部，所以我在想是否可
我想在我的 java web 应用程序中使用网络摄像头拍照。现在为了做到这一点，我使用 Photobooth.js，它提供了在 Web 应用程序中单击图像的工具。 现在我的问题是，一旦我单击按钮拍照，
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Get image data in Javascript? Convert an image into bi
我正在使用 chrome。 这是我的代码。 var save = document.createElement('a'); save.href = fileURL; save.download = f
我正在使用 HTML 5 Canvas 创建纯 Javascript 图像缩放器。我有一个将 Canvas 下载为图像文件的链接。 这适用于单个文件: $( '#dl' ).on( 'click',
我正在使用 html2canvas 来转换 html2canvas， 我正在使用 .each 解析 html，然后将元素传递给 html2canvas。在元素转换为 DataURL 之后。我将它推送到
我有一个 dataurl 格式的图像，例如: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwME…i
我正在尝试将图片上传到 Parse.com，我没有文件，但是有 dataURL(因为我调整了图片的大小)，但需要上传图片文件。 欢迎任何提示。 这里是更多细节的代码: // First want to
我正在研究 this app在 Chrome 应用商店中。显然文件 API 发生了变化，因此我需要实现 FileReader 以获取拖放到页面上的文件的本地 URL。 function drop(ev
将图像的来源作为 dataurl，有没有办法在 javascript 或 PHP 中获取图像的高度和宽度，以便我可以将它们设置为 div 的属性？ 或者是否有更好的方法使 div 缩放到图像大小。假设
我想知道要在浏览器中加载的 Base64 DataURL 图像的最大长度是多少？ 谢谢! 最佳答案 引用 MDN on this : Length limitations Although Mozil
我正在使用 Canvas 并使用以下脚本创建图像， function getImage() { var canvas1 = document.getElementById("images");
我是一名优秀的程序员,十分优秀！