下面的代码对图像的一部分进行裁剪。我想获取base64中裁剪区域的图像数据，我尝试使用context.toDataURL()来实现它
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
//imageObj.crossOrigin = "anonymous";
imageObj.onload = function () {
// crop from 0,0
浏览 2提问于2020-12-10得票数 1
回答已采纳
1回答
我只想将画布上的". .png“或". .jpg”位置作为图像。
我已经尝试过toDataURL()，但它不起作用。尤其是如果我在画布中加载了一个图像。
这是我的代码：(顺便说一句，我在这里使用jQuery )
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
浏览 3提问于2012-09-13得票数 1
回答已采纳
2回答
我想知道如何使用javascript下载JQuery生成的二维码或将其转换为可下载的图像(png/jpeg)。
我尝试了这里的：，但没有成功。我认为这与输出有关。有一个表和画布输出，但两者都没有给出图像数据...
下面是我的代码：
<script src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.js"></script>
<script type="text/
浏览 1提问于2015-08-23得票数 1
回答已采纳
我不知道为什么这个不起作用。图像的src属性随新数据而改变，但图像实际上不可见。我尝试了几种不同的图像。它只是浏览器中的javascript，并且Jquery是必需的。 <body>
<img src="" id="test">
</body>
<script>
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
let img = new
浏览 17提问于2019-06-09得票数 0
回答已采纳
2回答
有办法在保存之前裁剪base64图像吗？
目前，我使用html5画布来创建图像。
整个画布都保存了下来，效率很低。
画布是可调整大小的，我想知道是否可以从保存的图像中剪切未使用的透明像素。
JAVASCRIPT (JQUERY)
var wrapper = document.getElementById('Pad'),
save = wrapper.querySelector('[data-btn=save]'),
canvas = wrapper.querySelector('canvas'),
浏览 2提问于2014-09-11得票数 3
回答已采纳
1回答
在画布中，我使用clipTo函数裁剪圆圈、矩形的it.It作品，之后....i可以添加任何类似文本和图像的内容，我添加了下面的代码。
$(function(){
var canvas = new fabric.Canvas('Canvas',{backgroundColor: '#ffffff',preserveObjectStacking: true});
canvas.clipTo = function (ctx) {
ctx.arc(250, 300, 200, 0, Math.PI*2, true);
};
canvas.add(new fabric
浏览 1提问于2017-10-31得票数 1
回答已采纳
我需要编写html代码，使用phonegap中的相机API，并将图像设置为已定义的画布。我在网上发现了一些应该可以工作的代码(还包括一个水印)，但它不会向画布返回任何内容。谁能告诉我我错过了什么？我刚接触html和javascript，只是想弄清楚这个特殊的部分是如何工作的，然后我将它扩展为包括其他图像，以叠加到从相机拍摄的照片的顶部。
谢谢
<!DOCTYPE html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js&
浏览 1提问于2013-10-10得票数 4
好吧，我对Javascript和JQuery非常陌生，但是经过几个小时的研究，我忍不住问了这个问题。
我想写一个悬停函数，创建一个灰度版本的图像，并将这个新的黑白图像放在原来的上面。我在spyrestudios.com上找到了一个很好的代码，所以我的代码如下所示：
HTML法线代码
<!--IMG that is only an example with fixed sizes to make the script work. -->
<img id="canvasSource" class="testpic" wid
浏览 0提问于2012-04-02得票数 0
1回答
我有一个网站，我需要生成特定于用户的动态图像。我发现的方法是使用canvas。我有文本信息和图像文件，需要复制到画布，然后，稍后，可以转换为图像文件，用户可以下载。
function generateImage() {
let event_date = '11-02-2022'
let event_name = 'Prom Night'
let canvas = document.getElementById("your-canvas")
let ctx = canvas.getContext("2d
浏览 6提问于2022-05-15得票数 1
回答已采纳
1回答
我想用jquery改变图像的R，G，B颜色。我正在转换图像到画布，但它不工作，请修复我的错误或我错过了什么。
这一次我只是改变红色，如果这个作品休息可以做同样的事情。
以下是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
浏览 0提问于2013-05-16得票数 0
1回答
我的最终目标是显示一个通过ajax上传到服务器的canvas元素。我可以上传图片，但我不能显示我上传的图片， 问题是图像被保存为name_file.png，这很好，但我需要一种能够在页面上显示该图像的方法 对于可湿性粉剂专家来说，这可能是一个简单的问题。谢谢 JS代码 jQuery("#testbut").click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
var canvas = document.getElementById('bearup&#
浏览 12提问于2019-06-23得票数 0
回答已采纳
2回答
我正在使用jQuery AJAX表单插件上传图像，而无需刷新页面。如果我在一个image标签中显示上传的图片(将src设置为上传的图片路径)就可以了。但是，我不能在画布元素上绘制上传图像。我其实不知道问题出在哪里。
if (isset($_FILES["image"]["name"]) && !empty($_FILES["image"]["name"])) {
$filename = $_FILES["image"]["name"];
$tmpname = $_FILES[
浏览 2提问于2012-06-01得票数 3
我有个问题。我在Laravel上，我需要导出一个HTML页面到PDF。所以我使用barryvdh/laravel-dompdf，我试图导出一些数据和图像，它运行良好。事实上，我需要导出一个LineChart画布到PDF，所以我以前将画布转换成图像，它在我的视图中工作，但在我的PDF中不起作用。我使用这个脚本来生成图形：
这是我的密码：
// Controller code
public function pdf($name)
{
$MyObject = Object::where('name', $name)->first()->toArray();
浏览 3提问于2018-06-04得票数 0
回答已采纳
1回答
我需要上传一张图片。在上传图像之前，我从文件输入中获取它，使用画布调整它的大小，并将结果作为图像元素保存在DOM中。如何将Image对象转换为文件对象，以便使用ajax上传？
编辑：
下面是我所做的：
$.fitIn = function( size, bbox ) {
var r = size.w / size.h;
if( r > bbox.w / bbox.h ) {
var newW = bbox.w,
newH = newW / r;
} else {
var newH = bbox.h,
浏览 0提问于2013-01-05得票数 3
回答已采纳
作为标题，我想用html和javascript (或者jQuery，CSV，...)创建一个滑块。改变图像的对比度。喜欢主题。但是，我不想在HTML5中使用Canvas。
有没有办法做到这一点？
浏览 3提问于2017-05-10得票数 0
1回答
我在中构建了一个拖放小部件。我的拖放工作很好，但我需要能够保存掉的项目后，已被丢弃。基本上，无论图像放在哪里，我都需要通过保存这些信息。
我对jQuery相当陌生，所以我不知道如何将丢弃图像的位置保存到localstorage中。
任何帮助都将不胜感激。这是我的拖放jQuery代码。
$("#circle").draggable({
helper: "clone",
cursor: 'move'
});
$("#DragContainer").droppable({
drop: function (eve
浏览 2提问于2014-05-05得票数 0
目前正在研究如何在画布中插入冷融。目前，由于javascript错误"canvas.getContext('2d')；不是函数“，我陷入了困境。
画布必须位于div内：
<div id="svgbasics" name="svgbasics"></div>
这是用于生成图像的javascript
var canvas = $('#svgbasics').svg('get').toSVG();
var context = canvas.getContext('2d');
浏览 3提问于2013-01-25得票数 11
我有一个大问题，请帮帮我！这是我的代码：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
浏览 2提问于2015-12-04得票数 3
调整图像画布大小后的JQuery仅调整图像大小，而不是画布
function resizeImage(width, height){
var image = document.getElementById('resizeImage'),
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
ctx.drawImage(image,cropLeft, cropTop, cropWidth, cropHeight,10,10,
浏览 2提问于2017-05-31得票数 0
1回答
画布可满足不工作
、、、、
我以contenteditable ='true'的形式创建了画布，并将剪贴板上的图像粘贴到画布上。如下图所示，图像出现在画布旁边，而不是在画布上。当我试图将画布转换成图像时，我得到了空的图像。这是因为我的画布不包含先前粘贴的图像。我怎样才能得到图像？
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <
浏览 3提问于2013-07-23得票数 2
回答已采纳
2回答
Html5获取特定图层图像数据
、、、、
我正在用html5和jquery创建一个图像滑块，我想要做的是在一个画布上添加3个图像，然后获取第一个图像的像素数据，并删除它的一些像素，以通过第一个显示第二个图像。我在Jquery中使用插件来做这件事，到目前为止我得到的是
$(document).ready(function(){
function invert() {
$("canvas").setPixels({
x: 150, y: 150,
width: 100, height: 75,
// loop through each pixel
each: function(px)
浏览 1提问于2012-01-08得票数 0
回答已采纳
1回答
我正在寻找一种在浏览器中本地旋转图像并将其存储在本地的方法。
我试着用画布和jQuery旋转图像。但是在引导方法中，映像只在视图中旋转。一旦我存储这些图像(例如画布)。toDataURL())我得到原始文件/轮转。
有没有一种方法可以在浏览器中本地旋转图像，而不需要php/服务器端的交互？
谢谢!
$("#Img").rotate(90);
var dataURL5 = document.getElementById('Img').src;
-> dataURL5不包含旋转的图像，而是原始的.在浏览器中我有一个旋转的视图..。
或者用帆布：
context
浏览 1提问于2013-08-20得票数 0
回答已采纳
1回答
我正在尝试写一个jQuery插件，将有类似的功能，以闪光为基础的产品编辑器在Zazzle.com上。我需要知道的是，如何使用context.drawImage()画布函数插入图像并调整其大小以适应画布，而不会扭曲它。
图像是500x500px，画布也是，但由于某种原因，当我将500x500设置为图像尺寸时，它就太大了。
以下是我到目前为止的完整代码：
(function( $ ) {
jQuery.fn.productEditor = function( options ) {
var defaults = {
'id'
浏览 1提问于2011-10-13得票数 6
回答已采纳
1回答
我试图拖拽画布中的图像，当我在画布中移动相同的图像时，我就会在canvas.But中获得该图像的完美协调，我不会得到该图像的新的坐标。当我移动图像时，我需要帮助确定新的坐标。
这是我的密码：
// get the offset position of the kinetic container
var $stageContainer=$("#container");
var stageOffset=$stageContainer.offset();
var offsetX=stageOffset.left;
var offsetY=stageOf
浏览 0提问于2015-02-09得票数 2
回答已采纳
1回答
我正在使用下一段代码，尝试从图像中获取像素颜色
$(document).ready(function(){
var img = document.getElementById('my-image');
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawI
浏览 2提问于2017-05-25得票数 1
1回答
背景
我现在正在处理客户端选择的图像。
我想对该映像执行两个操作，并输出base64 64编码的字符串。
如果图像大小的宽度或高度大于1000，则调整其大小。
用质量为0.5的jpeg压缩图像。
现在，我将在主要脚本中完成以下操作：
$(function() {
$('#upload').change(function() {
var URL = window.URL || window.webkitURL;
var imgURL = URL.createObjectURL(this.files[0]);
var img
浏览 0提问于2015-11-28得票数 2
回答已采纳
1回答
我尝试获取滑块'red‘的值，如下所示：
red : $('#red').slider('value'),
但它不起作用。有人能告诉我为什么吗？我正在尝试创建一个使用jQuery滑块的颜色选择器。
var canvas2D = {
canvas : undefined,
canvasContext : undefined,
x : undefined,
y : undefined,
w : undefined,
h : undefined,
color : undefined,
red : $('#red
浏览 2提问于2017-04-29得票数 0
1回答
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/canvas2image.js"></script>
<script>
function mypng(){
var c=do
浏览 1提问于2015-01-09得票数 0
2回答
并不是所有的浏览器都在发送原始头
、、、、
我尝试将图像加载到画布元素中，然后在toDataURL()中提取数据。
我使用Ruby on Rails 2.3运行我的站点
我的图片来自亚马逊网络服务s3。我已经设置了cors：
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<
浏览 0提问于2013-01-09得票数 20
回答已采纳
这是我的密码
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="html2canvas.js"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(functio
浏览 4提问于2015-10-01得票数 0
回答已采纳
我把画布放到一个HTML中，然后使用Html2canvas将这个div转换成图像。成功地转换了HTML div，但是没有出现背景图像。
我见过一个环节，但我不确定。因为我没有看到任何背景图像。
请给我建议一下。
$(function() {
$("#btnSave").click(function() {
html2canvas($("#html-to-canvas"), {
onrendered: function(canvas) {
theCanvas = canvas;
浏览 0提问于2016-01-28得票数 4
回答已采纳
1回答
是否可以在不使用canvas jQuery元素的情况下获得网页上图像中像素的十六进制代码(使用jQuery，)？请注意，我不想要包含在其中的div的背景颜色或颜色，我要图像的实际颜色代码。
例如：
假设你有一个包含在div中的图像。
<div class="wrapper" style="background-color: red">
<img src="random/Image.png"/>
</div>
假设这个随机图像有一个透明的背景，它的内容是蓝色，紫色和黄色，我想让蓝色回贴当我悬停在蓝色，同样的黄色如
浏览 2提问于2016-02-03得票数 0
2回答
我正在使用html2canvas和Canvas2Image从画布创建一个png图像，并使用唯一的文件名将其保存到服务器。
我想知道如何检索和显示唯一的文件名后，它被生成。
jQuery
$(function() {
$("#convertcanvas").click(function() {
html2canvas($("#mycanvas"), {
onrendered: function(canvas) {
浏览 0提问于2016-11-18得票数 1
1回答
我有一个网站，其中有一部分人可以上传图片和调整这个图像的大小。为了改变图像的大小，使用了Fabricjs ()。
问题是，当图像被调整大小时，当它失去分辨率时，它在改变大小后会显得非常难看。下面是用来实现这一目标的代码：
function addImage(imgSrc, img_name, colorArr)
{
console.log("add image call")
var splitArr = colorArr.split(",");
show_image();
jQuery("#img_name").
浏览 4提问于2015-05-13得票数 1
回答已采纳
对JavaScript来说很新。
我正在构建一个站点，将模板图像与用户的输入进行比较，并构建一些图像处理指令。模板图像存储在站点的文件夹中。
$(function() {
$("#btnDirective").click(generateEmoteDirectiveFile);
});
function generateEmoteDirectiveFile() {
getImageData('imgs/templates/human.png');
}
function getImageData(source) {
var image = ne
浏览 0提问于2018-08-06得票数 0
回答已采纳
1回答
如何缩放画布图案的图像？
、、、
我想在画布上填上一张图片，并事先把它缩放到一定的宽度。
我试图达到这样的效果，在帆布前景中的图像可以用鼠标擦除，以查看背景中的图像。这就是为什么我需要使用一个模式来填充我的画布，而不是仅仅使用drawImage()。除了前景图像的缩放之外，一切都可以工作。下面是生成模式的代码：
var blueprint_background = new Image();
blueprint_background.src = "myfunurl";
blueprint_background.width = window.innerWidth;
blueprint_background.onl
浏览 1提问于2019-01-14得票数 0
1回答
我希望用户上传图像或指定图像的URL，然后能够看起来像他们是在图像上绘制。这样我就可以制作一个带有背景图像的<canvas>元素。但我事先不知道这张图片有多大(如果他们上传了一张图片，我可以弄清楚)。如何使用jQuery处理此问题？
我知道我可以调用$('img#id_name').width并基于该宽度创建一个画布(并以同样的方式获取高度)。但我希望这是背景图像。
浏览 0提问于2013-01-13得票数 0
我使用html2canvas将div转换为image/png。当在选定的div中有一个文本，但我在其中有一个图像时，它工作得很好。所以当我点击按钮时，我看不到由html2canvas创建的base64图像中的图像。
我的代码是这样的；
这是我的脚本：
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="html2canvas.js"></script>
<script>
$(function(){
浏览 0提问于2013-03-28得票数 4
1回答
我想用裁剪上传的图片。
另外，我想限制图像的大小(以字节为单位)，并将其保存为png格式。当我不使用裁剪的图像时，我可以使用以下代码获得图像长度：
var postedFile = Request.Files["FileUpload1"];
long length=postedFile.ContentLength;
我的问题是我不能得到正确的裁剪图像长度。如果我在Upload函数中使用bytes.Length，它会从FileUpload控件中获得大于原始图像长度的长度。如何获得png格式的裁剪图像长度？
我的代码如下：
<script type="text
浏览 0提问于2019-06-25得票数 0
2回答
我有一个代码示例，在这个示例中，我将大图像调整为更小的大小，画布与图像的大小相匹配。有一个旋转正确的功能，它将旋转画布内的图像，这将调整画布的大小。我几乎有它完美的工作，但图像是完美的大小时，只有原始或颠倒。当图像在左或右旋转时，我无法得到正确的高度比。这是我的小提琴和代码，这是修改的代码从不同的小提琴。图像只是用作测试。
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasWidth = 400;
var c
浏览 8提问于2017-08-04得票数 1
回答已采纳
当使用setSrc()将选定的画布图像更改为更大的图像时，在位于原始较小图像的xy边界之外的新图像区域上无法识别鼠标事件。
相反，当将选定的画布图像更改为较小的图像时，会在新图像以外的区域识别鼠标事件，直到原始大图像的xy边界。
在任何一种情况下，一旦新图像收到鼠标单击，事情就会恢复正常，在那里整个图像接收鼠标事件，不会更多，也不会更少。此外，控件显示在正确的位置，但不能按上面所述。
是否有一种方法来纠正此行为，以便只有完整的可见图像才能接收鼠标事件？
HTML
<body>
<script src="http://code.jquery.com/jquer
浏览 3提问于2015-09-30得票数 1
1回答
我在html页面中有一个canvas html元素，如下所示：
<canvas id="myCanvas2" width="290" height="250" style="background-color:red"></canvas>
我想使用jquery访问画布。如果我尝试使用jQuery访问，它不工作，如果我尝试使用document.getElementById，那么只有它工作。
代码如下：
var canvas = $("#myCanvas2");
console.log(
浏览 1提问于2013-04-24得票数 1
回答已采纳
3回答
我正在工作的产品，输出用户的图像和图像信息是覆盖在上面提到的图像。正如您可能想象的那样，由于亮度/暗度的原因，图像需要不同的文本颜色。有没有办法通过JavaScript来实现这一点呢？
编辑:我发现了一个与我类似的问题，并且在jsfiddle ()中给出了一个解决方案。不过，我的网站使用的是jQuery。如何将普通的JavaScript转换为jQuery？
var rgb = getAverageRGB(document.getElementById('i'));
document.body.style.backgroundColor = 'rgb(' + rg
浏览 0提问于2013-06-19得票数 21
回答已采纳
该图像是一个带有透明圆圈的橙色正方形。用html 5 canvas tag + jquery可以改变橙色而不影响透明的圆圈/背景吗？如果有更好的方法，我也想听听。
浏览 3提问于2012-03-07得票数 0
回答已采纳
我想把一个div转换成画布，然后最终转换成图像。所以我使用的是html2canvas库。我试过下载图像，在新窗口中打开图像，并附加到div中，但它们都没有工作。
$(document).ready(function (e) {
$("#final_download").click(function() {
html2canvas($("#final_image_div")[0]).then(function (canvas) {
console.log(canvas);
var myImage = ca
浏览 1提问于2021-12-05得票数 0
我正在一个简单的应用程序的离线模式下工作，我正在使用Indexeddb (PounchDB作为库)，我需要将图像转换为Base64或BLOB才能保存它。
我试过这个代码，它只适用于一个图像(提供的图像)，我不知道为什么它不适用于任何其他图像：
function convertImgToBase64URL(url, callback, outputFormat){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
var canv
浏览 0提问于2015-04-13得票数 8
我想在动作模拟时画一个图像，但是当我在drawImage中使用mousemove时，我会得到一个不好的图像(参见右图像)：
操作mousemove时图像绘制错误的原因
P.S.：我想用质量好的左画来画右边的图像；
var canvas = document.getElementById('canvas_test');
var context = canvas.getContext("2d");
var img_test__src = 'http://image.prntscr.com/image/8233c5a42e7e4b40a19c64
浏览 5提问于2016-11-12得票数 1
回答已采纳
当网页被加载时，我正在从视频中创建一个缩略图，我正在使用jquery来实现它。
所以我在html里有3段视频-
<video width="320" height="240" controls poster="">
<source src="small.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video width="
浏览 3提问于2017-05-23得票数 0
5回答
HTML5画布中的图像单击事件
、、、、
我有一个HTML5画布，我已经在其中添加了一个图像，我想调用点击事件的图像，但事件不触发。我正在编写html代码和一些jqmobile代码。
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.mobile-1.2.1.js"></script>
<script src="jquery.mobile-1.2.1.min.js"><
浏览 5提问于2014-04-07得票数 5
回答已采纳
2回答
我是JavaScript的新手，我正在使用这段代码，使用Fabric.js通过单击一个按钮来创建多个图像。我在另一篇文章中找到了下面的代码，它允许使用形状，但我似乎想不出如何成功地制作这些图像。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="fabric.min.js"></script>
<script t
浏览 0提问于2015-07-25得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
