- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在尝试使用 javascript、html、css 创建一个页面,我可以通过在线链接调整图像的大小。但是,在调整大小时,我遇到了使用 Canvas.toDataURL()
时可能无法导出受污染的 Canvas 的错误。我在谷歌和这里搜索了这个问题。有人建议将照片的 crossorigin 修改为匿名或 '*'。我尝试了这两种方法,但它对我不起作用。我想知道任何人都可以提供帮助。我的代码在下面的链接中。
https://jsfiddle.net/pangkachun/7axkq9pe/1/
var min_img_width = 60;
var min_img_height = 60;
var max_img_width = 1000;
var max_img_height = 1000;
var resizeableImage = function(image_target) {
// Some variable and settings
var $container,
orig_src = new Image(),
image_target = $(image_target).get(0),
event_state = {},
constrain = false,
min_width = min_img_width, // Change as required
min_height = min_img_height,
max_width = max_img_width, // Change as required
max_height = max_img_height,
resize_canvas = document.createElement('canvas'),
// ----------------- function to int the page ----------------------//
init = function(){
// When resizing, we will always use this copy of the original as the base
orig_src.src = image_target.src;
orig_src.crossorigin = 'anonymous';
// Wrap the image with the container and add resize handles
$(image_target).wrap('<div class="resize-container"></div>')
.before('<span class="resize-handle resize-handle-nw"></span>')
.before('<span class="resize-handle resize-handle-ne"></span>')
.after('<span class="resize-handle resize-handle-se"></span>')
.after('<span class="resize-handle resize-handle-sw"></span>');
// Assign the container to a variable
$container = $(image_target).parent('.resize-container');
// Add events (one for resize (resize handle) and one for moving - img)
// addEventListenor -> mouse touchdown, resize handle, resize_img
$container.on('mousedown touchstart', '.resize-handle', startResize);
};
// ------------------ end function to int the page -------------------------//
// to save the data upon a event is fired
saveEventState = function(e){
// Save the initial event details and container state
event_state.container_width = $container.width();
event_state.container_height = $container.height();
event_state.container_left = $container.offset().left;
event_state.container_top = $container.offset().top;
event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
event_state.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();
// This is a fix for mobile safari
// For some reason it does not allow a direct copy of the touches property
if(typeof e.originalEvent.touches !== 'undefined'){
event_state.touches = [];
$.each(e.originalEvent.touches, function(i, ob){
event_state.touches[i] = {};
event_state.touches[i].clientX = 0+ob.clientX;
event_state.touches[i].clientY = 0+ob.clientY;
});
}
event_state.evnt = e;
};
// function to redraw the image based on width and height
redrawImage = function(width, height){
resize_canvas.width = width;
resize_canvas.height = height;
resize_canvas.getContext('2d').drawImage(orig_src, 0, 0, width, height);
$(image_target).attr('src', resize_canvas.toDataURL("image/png"));
};
//------------------------ resizing function starts ----------------------------//
startResize = function(e){
e.preventDefault();
e.stopPropagation();
saveEventState(e);
$(document).on('mousemove touchmove', resizing);
$(document).on('mouseup touchend', endResize);
};
endResize = function(e){
e.preventDefault();
$(document).off('mouseup touchend', endResize);
$(document).off('mousemove touchmove', resizing);
};
resizing = function(e){
var mouse = {}, width, height, left, top, offset=$container.offset();
mouse.x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
mouse.y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();
// Position image differently depending on the corner dragged and constraints
if( $(event_state.evnt.target).hasClass('resize-handle-se') ){
width = mouse.x - event_state.container_left;
height = mouse.y - event_state.container_top;
left = event_state.container_left;
top = event_state.container_top;
} else if($(event_state.evnt.target).hasClass('resize-handle-sw') ){
width = event_state.container_width - (mouse.x - event_state.container_left);
height = mouse.y - event_state.container_top;
left = mouse.x;
top = event_state.container_top;
} else if($(event_state.evnt.target).hasClass('resize-handle-nw') ){
width = event_state.container_width - (mouse.x - event_state.container_left);
height = event_state.container_height - (mouse.y - event_state.container_top);
left = mouse.x;
top = mouse.y;
if(constrain || e.shiftKey){
top = mouse.y - ((width / orig_src.width * orig_src.height) - height);
}
} else if($(event_state.evnt.target).hasClass('resize-handle-ne') ){
width = mouse.x - event_state.container_left;
height = event_state.container_height - (mouse.y - event_state.container_top);
left = event_state.container_left;
top = mouse.y;
}
if(width > min_width && height > min_height && width < max_width && height < max_height){
// To improve performance you might limit how often resizeImage() is called
redrawImage(width, height);
// Without this Firefox will not re-calculate the the image dimensions until drag end
$container.offset({'left': left, 'top': top});
}
}
//------------------------ resizing functino end ----------------------------//
init();
};
resizeableImage($('.resize-image'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Image Resizing with Canvas</title>
<link rel="stylesheet" type="text/css" href="css/component.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="content">
<header class="codrops-header">
<h1>Image Resizing & Cropping <br /><span>with Canvas</span></h1>
</header>
<div class="component">
<div class="overlay">
<div class="overlay-inner">
</div>
</div>
<img class="resize-image" id='test-img'crossorigin="anonymous" src="https://static-cdn.pixlr.com/images/image-design.png" alt="image for resizing">
</div>
</div><!-- /content -->
</div> <!-- /container -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/component.js"></script>
</body>
</html>
非常感谢。
最佳答案
有几种方法可以解决这个问题,但所有方法都至少需要在您的服务器上临时托管图像。最简单的选择是编写一个简单的 cgi 脚本,将 url 作为参数,在该 url 获取图像,并将其发送到浏览器,就像它在您的服务器上一样。如果您希望用户能够选择本 map 片,您也可以使用文件上传表单。
请注意,如果您这样做,您需要了解获取用户选择的文件并像在您自己的服务器上一样提供它们的安全隐患。您至少要确保文件是有效图像,而不是 javascript 文件(这可能会导致代码注入(inject)攻击)。
不允许导出受污染的 Canvas 数据的原因是这是一个用户安全问题。远程站点可以向不同的用户发送不同的图像,如果您的站点仅通过在 Canvas 上绘制就可以访问该图像,则该方法可用于窃取用户的私有(private)数据。例如,亚马逊曾经让网站所有者在他们的网站中嵌入一张图片,最终成为包含问候语和最终用户姓名的定制广告。如果您可以在 Canvas 上绘制并导出数据,则可以将该数据发送回您的网络服务器并对其进行 OCR 以了解最终用户的姓名。
关于javascript - Canvas.toDataURL() 受污染的 Canvas 可能无法导出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59114212/
是否可以调整此代码以导出foreach循环外的所有行: 这工作正常(内部循环): $vms = Get-VM | Where { $_.State –eq ‘Running’ } | Select-
我试图将我的 bundle.js 引入我的 Node 服务器,但显然 webpack 包在顶部的所有包代码之前缺少一个 module.exports =。 我可以手动将 module.exports
我有一个 android 项目,其中包含一个库项目。在这个库项目中,我包含了许多可绘制对象和动画。 问题是,当我将主项目导出为 .apk 时,它包括所有可绘制对象和动画,甚至是主项目中未使用的对象。
我的一个 mysql 用户以这种方式耗尽了他的生产数据库: 他将所有数据导出到转储文件,然后删除所有内容,然后将数据导入回数据库。他从 Innodb 大表空间中保存了一些 Gig(我不知道他为什么这样
我正在 pimcore 中创建一个新站点。有没有办法导出/导入 pimcore 站点的完整数据,以便我可以导出 xml/csv 格式的 pimcore 数据进行必要的更改,然后将其导入回来? 最佳答案
我有以下静态函数: static inline HandVal StdDeck_StdRules_EVAL_N( StdDeck_CardMask cards, int n
因为我更新了 angular cli 和 nestjs 版本,所以我收到了数百条警告,提示我无法找到我的自定义类型定义和接口(interface)。但是我的nestjs api仍然可以正常工作。 我正
Eclipse 的搜索结果 View 以其树状结构非常方便。有没有办法将这些结果导出为可读的文本格式或将它们保存到文件中以备后用? 我试过使用复制和粘贴,但生成的文本格式远不可读。 最佳答案 不,我认
我想在用户在 Chrome 中打开页面时使用 WebP否则它应该是 png。 我找到了这段代码: var isChrome = !!window.chrome && !!window.chrome.w
您好,我正在尝试根据“上次登录”导出 AD 用户列表 我已经使用基本 powershell 编写了脚本,但是如果有人可以使用“AzureAD 到 Powershell” 命令找到解决方案,我会很感兴趣
有没有办法启用 Stockchart 的导出?我知道这对于普通图表是可行的,但对于股票图表,当尝试启用导出模式时,我得到了未定义, 我尝试过:chart.export.enabled=true;和ch
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,因为
我正在尝试学习如何使用命令行将数据导入/导出到 Oracle。根据我的发现,看起来我应该使用 sqlldr.exe 文件来导入和导出,但我不确定除了 userid 之外还需要什么参数。谁能给我解释一下
您好,我正在尝试根据“上次登录”导出 AD 用户列表 我已经使用基本 powershell 编写了脚本,但是如果有人可以使用“AzureAD 到 Powershell” 命令找到解决方案,我会很感兴趣
我想生成一个 PDF,它将以表格格式显示查询集的输出,例如: query = ModelA.objects.filter(p_id=100) class ModelA(models.Model):
我有一个数据库代理,可以从 IBM Notes 数据生成 Word 文档。我正在使用 Java2Word API 来实现此目的,但不幸的是,该 API 几乎没有文档,而且我找不到任何有关表格格式(大小
我尝试将 Java 程序从 Eclipse 导出到 .jar 文件,但遇到了问题。它运行良好,但由于某种原因它没有找到它应该从中获取数据的文本文件。如果有人能帮忙解决这个问题,我将非常感激。 最佳答案
我正在尝试学习如何使用命令行将数据导入/导出到 Oracle。根据我的发现,看起来我应该使用 sqlldr.exe 文件来导入和导出,但我不确定除了 userid 之外还需要什么参数。谁能给我解释一下
使用LLVM / Clang编译到WebAssembly的默认代码生成将导出内存,并完全忽略表。 使用clang(--target=wasm32-unknown-unknown-wasm)定位Web组
我正在尝试在 HSQL 数据库中重新创建一个 oracle 数据库。 这是为了在本地开发人员系统上进行更好的单元测试。 我需要知道的是,是否有任何我可以在 oracle 服务器/客户端中使用的工具/命
我是一名优秀的程序员,十分优秀!