- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用fabric.js
。我正在 Canvas 中上传多个图像。上传图片后。然后canvas通过toDataURL()
转换为图像。我想将此转换后的图像粘贴到尺寸为 2000x2000
的 T 恤上。但是这个图像尺寸很小,当我尝试增加其尺寸时,它由于拉伸(stretch)而变得模糊
我需要与用户上传的图像大小相同的图像,而不是缩小图像的放大版本。例如,如果用户上传了尺寸为 1500x1500
的图像,那么从 Canvas 中我只需要尺寸为 2000x2500
的图像,而不是 400x400
。
我看过 99Thsirts.com 网站,但我不知道如何处理护照尺寸图像。
我只想要干净的上传自定义图像(不模糊),因为我正在实现自定义 T 恤。
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (f) {
var data = f.target.result;
var img = document.createElement('img');
img.src = data;
img.onload = function () {
if (img.width < 1000 || img.height < 1000)
{
alert("upload image should be greater then 1000px*1000px");
canvas.getActiveObject().remove();
}
};
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 50, top: 100,width:100, height:100, angle: 00}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
console.log("aaaaaaaaaaa" + dataURL);
// console.log("Canvas Image " + dataURL);
// document.getElementById('txt').href = dataURL;
});
};
reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function (e) {
e.preventDefault();
canvas.deactivateAll().renderAll();
document.querySelector('#preview').src = canvas.toDataURL();
}
canvas{
border: 1px solid black;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file">
<canvas id="canvas" width="400" height="400"></canvas>
<a href='' id='txt' target="_blank">Click Me!!</a>
<br />
<img id="preview" />
https://jsfiddle.net/varunPes/8gt6d7op/21/
请分享您的想法。
最佳答案
如果将图像大小调整为 100x100 像素,那么您将得到 100x100 的图像。加载图像时请勿更改图像的宽度和高度。也没有理由使用图像加载函数和 imageFromURL 函数。
也就是说,加载你的图像,将其缩放到 90 像素的宽度(现在你正在做 100,缩放为 0.9,所以是 90 像素),将其放置在 Canvas 上。
Canvas 为 400 像素,当您导出它时,您将指定乘数 5 以获得 2000 像素的 Canvas 。图像将被拉伸(stretch),而不会失去其原始分辨率。当然,它不会提高其标准分辨率。
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (f) {
var data = f.target.result;
var img = document.createElement('img');
img.onload = function () {
if (img.width < 1000 || img.height < 1000)
{
alert("upload image should be greater then 1000px*1000px");
return;
}
var oImg = new fabric.Image(img);
var oImg = oImg.set({left: 50, top: 100, angle: 00}).scaleToWidth(90);
canvas.add(oImg);
canvas.setActiveObject(oImg);
};
img.src = data;
};
reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function (e) {
e.preventDefault();
canvas.deactivateAll();
document.querySelector('#preview').src = canvas.toDataURL({multiplier: 5});
}
canvas{
border: 1px solid black;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file">
<canvas id="canvas" width="400" height="400"></canvas>
<a href='' id='txt' target="_blank">Export me 5x Bigger ( 400x5=2000)</a>
<br />
<img id="preview" />
关于javascript - 保留 Canvas 上图像的原始质量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35499085/
我使用透视滤镜在视频上放了一张图片。 示例 https://yadi.sk/i/MXtWUArJ3TyWBm 我怎样才能提高质量? 代码 ffmpeg -y -i bg.mp4 -loop 1 -i
我是 Matlab 的新手,虽然我知道一些其他的编程语言,所以如果这很简单,请原谅我。我无法在 StackOverflow 或其他地方找到任何答案。 我使用以下代码生成一个图形: figure(6)
我是 Matlab 的新手,虽然我知道一些其他的编程语言,所以如果这很简单,请原谅我。我无法在 StackOverflow 或其他地方找到任何答案。 我使用以下代码生成一个图形: figure(6)
在包含另一个类时,我总是需要写#include "headername.h"。是否可以在不编写其他类或使用“#include”包含多个类的情况下访问其他类? 最佳答案 什么 #include指令的作用
我有一个 .webm我想加速以延时拍摄的视频。我的原创.webm视频是 1280x720 并且质量非常好,但是当我用 FFMPEG 加速它时质量真的很差(即使分辨率保持不变)。这是我正在使用的命令:
我正在使用以下命令生成缩略图: mogrify -resize 128x128 -quality 75 "some thumb file" 对于示例文件: 如果我不指定质量 75,我会得到一个 40K
我想使用流体库的模型。谁能解释一下(我是建模/模拟的新手):质量/能量/动量平衡的公式:稳态、动态和初始猜测初始固定-->之间有什么区别以及对初始化时间/计算的影响是什么时间;我什么时候需要哪一个。
我通过解析“fmt 流映射”得到流 URL, 问题是如果我的视频时长不到 1 小时,我会得到这个: { "comment_count" = 1; description = ""; "dislikes
我试图根据用户的屏幕高度分辨率显示不同的视频分辨率,我有这段代码,但我不是 javascript 专家。它应该改变 src 属性,如果 res 低于 o 等于 360px 高度,等等。有什么建议吗?
我有播放 HLS 视频的 ExoPlayer,问题是我需要让用户能够更改视频质量(自动/1080/720/480)。 我发现使用 AdaptiveTrackSelection.Factory 确实可以
我的应用程序使用 phpmyadmin 连接到 mysql 中的数据库并将图像存储在数据库中,但我的问题是当我从数据库下载图像并将图像发布到 imageview 上时,图像的质量非常低颜色也受到影响。
大家好,我一直在使用 JavaFx 场景构建器来构建一个包含一些 png 图片的图形用户界面。 到目前为止,我一直在使用标签,然后将它们放大以适合图片(以便图片可见。但是这个解决方案并不令人满意,因为
我注意到,在显示比例为 1:1 的小图片时,它们通常看起来呈 block 状。我可以在使用 时解决问题通过使用更大比例的图像并使用 css 设置所需的大小来标记。 但是,我想用 background
我是自定义 CSS 的新手。我的老板希望我在 Qualtrics 中添加自定义 CSS(在外观/高级下)。在编辑预览窗口中,一切似乎都格式正确,但在实际调查页面上,许多元素的格式并未应用:图像是原始大
所以我尝试使用 CreateFont 尝试创建一种类似于我在 Photoshop 中使用的字体,但如果你仔细观察,Photoshop 中的质量要好得多。 这是我用来创建字体的代码: CreateFon
在自动去歪斜和裁剪之后我得到了下面的图像: 我需要对这张图片进行 OCR。现在 ABBYY Engine SDK 11 For Linux 产生的结果不是很好: IMerasers - www,rai
我目前在我的项目中使用 xorshift128+,我知道它通过了 Big Crush,并且被认为可以根据其速度生成相当高质量的随机数。但是,它会生成 64 位数字,而我需要的绝大多数随机数都是小整数(
我使用 python 以较小的质量保存 jpeg im = Image.open(file) im.save(cached_file, quality=80, optimize=True, progr
我在保存或使用 Gmagick PHP 扩展时找不到任何属性。 http://php.net/manual/en/book.gmagick.php 如何在 Gmagick 中更改 JPEG 质量? 最
youtube视频通常具有多种视频分辨率(质量),例如240p,360p,720p等,我如何检索youtube视频具有的视频分辨率(质量)是否有可以获取此信息的youtube api?Google.A
我是一名优秀的程序员,十分优秀!