如何避免溢出PNG帧？

Question

我必须要对象。其中一个是PNG格式化的图像框架，另一个是JPG格式的图像。

当我将JPG格式的图片拖动到PNG格式化的图片时，(jQuery's drag and drop function)我的JPG格式化图片会溢出 PNG格式的图片。我不希望JPG图片溢出我的PNG框架。我怎样才能克服它？

我正在上传一张你很容易理解我的问题的图片。

Answer 1

假设允许HTML5 Canvas： -

• 在脚本中创建一个新画布并获取2D上下文。
• drawImage to JPG image。
• 为您的框架创建第二个画布并获取其第二个上下文。
• 将PNG绘制到第二个画布上。
• 在两个上下文中调用getImageData以获得RGBA顺序的两个字节数组。
• 通过检查第二个画布上的alpha并根据需要组合RGB来处理每个像素。
• 调用putImageData将结果保存回上下文。
• 然后，您可以在其他脚本中绘制您写入的画布，或使用canvas.toDataURL（“image / png”）获取src网址。

Answer 2

有很好的支持画布和SVG解决方案，以及CSS Masks的前沿支持。