javascript - 如何避免 PNG 框架溢出?

标签 javascript jquery css html

我必须反对。其中一个是 PNG 格式的图像帧,另一个只是 JPG 格式的图像。

当我将 JPG 格式的图像拖到 PNG 格式的框架时,(jQuery 的拖放功能) 我的 JPG 格式的图像溢出 < strong>PNG 格式的框架。我不希望 JPG 图像溢出我的 PNG 框架。我该如何克服它?

我正在上传一张图片,您会很容易理解我的问题..

enter image description here

最佳答案

假设允许使用 HTML5 Canvas:-

  • 在脚本中创建一个新 Canvas 并获取 2d 上下文。
  • 将图像绘制到 JPG 图片的上下文中。
  • 为您的框架创建第二个 Canvas 并获取其二维上下文。
  • 将您的 PNG 图像绘制到第二个 Canvas 上。
  • 在两个上下文中调用 getImageData 以获取按 RGBA 顺序排列的两个字节数组。
  • 通过检查第二个 Canvas 上的 alpha 并根据需要组合 RGB 来处理每个像素。
  • 调用 putImageData 将结果保存回上下文。
  • 然后您可以在您在其他脚本中写入的 Canvas 上绘制图像,或使用 canvas.toDataURL("image/png") 获取 src url。

关于javascript - 如何避免 PNG 框架溢出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17832289/

相关文章:

PHP 生成的表单不提交 AJAX

JavaScript 对话框被编程为在页面滚动时移动,但它会闪烁。这可以解决吗?

html - 垂直对齐 span 与 li 中的文本

jquery - 奇怪的 Bootstrap 轮播问题与其他元素的圆 Angular

html - 选择中的谷歌浏览器错误

javascript - 使用 Jquery 查找下一个文本区域

javascript - 如何使复选标记的颜色不同?

javascript - longpress 事件在使用 Phonegap 的 Android 中不起作用

javascript - 经典 ASP : VBScript to Javascript

javascript - HTML + Javascript 项目的配置文件