为啥我在html5中取到了canvas画布（已测试能取到），但是执行canvas.toDataURL("image.png")不成功，

Posted 2023-05-02

每当执行到这里就停止执行，我测试利用context.getImageData(10,10,30,30);也不执行，执行到这里之后也就停止执行了，想问一下这是为什么呢？？？求解求解

1. 关于toDataURL(type, ratio)函数，参数type在image/png，image/jpeg,image/svg+xml等 MIME类型中选择（可以不填，默认是image/png）。如果是type = “image/jpeg”，可以有第二个参数，如果第二个参数ratio的值在0-1之间，则表示JPEG的质量等级，否则使用浏览器内置默认质量等级。

2. 关于getImageData()函数，这个涉及到js安全问题，你的代码涉及到了跨域访问，比如你在上面画了某个图片。
解决办法有2个：要么用firefox（推荐），要么自己架设一个web服务器，网页放里面，然后浏览器访问（如果只是自己玩玩js+canvas的话可以使用Aptana Studio 3，比较方便，不需要设置什么） 参考技术A 1. 关于toDataURL(type, ratio)函数，参数type在image/png，image/jpeg,image/svg+xml等 MIME类型中选择（可以不填，默认是image/png）。如果是type = “image/jpeg”，可以有第二个参数，如果第二个参数ratio的值在0-1之间，则表示JPEG的质量等级，否则使用浏览器内置默认质量等级。

2. 关于getImageData()函数，这个涉及到js安全问题，你的代码涉及到了跨域访问，比如在上面画了某个图片。
解决办法有2个：要么用firefox，要么自己架设一个web服务器，网页放里面，然后浏览器访问（如果只是自己玩玩js+canvas的话可以使用Aptana Studio 3，比较方便，不需要设置什么）

在画布上绘制位图已缩放

【中文标题】在画布上绘制位图已缩放

【英文标题】：Drawing a Bitmap on a Canvas got scaled

【发布时间】：2011-02-16 09:49:25

【问题描述】：

我创建了一个带有两个位图的自定义视图。当我在我的视图之外使用位图时，在 ImageView 中，图像是好的。我必须打电话给setDensity(240)（hdpi 设备），但没关系。 但是，在自定义视图中，当我在画布上绘制相同的位图时，在 onDraw(Canvas) 覆盖的方法中，它会再次缩放，与我不调用 setDensity(240) 时的方式相同。 通过调试，我确保调用后画布和位图的密度为240。

代码：

@Override
protected void onDraw(Canvas canvas)     
    _ingredient.setDensity(240);
    canvas.setDensity(240);
    canvas.drawBitmap(_ingredient, new Matrix(), new Paint());
    Matrix refMatrix = new Matrix();
    refMatrix.postTranslate(0, _ingredient.getHeight()-35);
    Paint paint = new Paint();
    paint.setAlpha(60);

在我的视图之外工作的 ImageView。

Bitmap tertr = _cocktail.getCocktailBitmapImage();
tertr.setDensity(240);
ImageView in = new ImageView(this);
in.setScaleType(ScaleType.CENTER);
in.setImageBitmap(tertr);
RelativeLayout relativeLayout = RelativeLayout)findViewById(R.id.cocktail_date_image_layout);
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
relativeLayout.addView(in, params);

第一个显示放大的图像，就像第二个一样，没有 setDensity 调用。图像以 72dpi 创建。这些图像是给定的，我无法更改它们。我错过了一件事，或者这就是 Canvas 的工作原理？用于测试的设备是 DROID2。

【参考方案1】：

我解决了这个问题。导致问题的代码 sn-p 在清单文件中。 我们将 <supports-screens android:anyDensity="false"/> 更改为 true。 True 是默认设置，但不幸的是我在尝试不同方法时更改了它。有了新值和setDensity() 方法，它就可以工作了。

【讨论】：

这就是答案吗？如果是这样，您可以将其标记为已接受，除非您认为@boulder 的答案更普遍有用。

我做到了，但我不得不等待 20 个小时。 :)

【参考方案2】：

位图密度不是将在其上绘制的屏幕密度，而是位图的“原始”密度。这意味着如果位图和屏幕密度匹配，则不会缩放位图。如果您希望图像的倾角大小与像素大小相同，则应将位图密度设置为 160。希望这会有所帮助。

另外我认为你不应该修改画布密度。

【讨论】：

你能解释一下，160的值是怎么来的吗？正如您在代码中看到的那样，我设置了位图密度以匹配屏幕的密度。

160dpi 是默认的 Android 密度。如果您将位图密度设置为 160 并且屏幕密度为 240，则位图将按比例放大。如果您将位图密度设置为 240，则不会在 240dpi 设备上进行缩放，但会在 160dpi 设备上进行缩小。

此外，您从哪里获得位图？您是从资源还是从其他来源（即网络）获取的？

我将它们用作资产（资产文件夹）。我还是不明白，为什么我的图片被缩放了，当我将它们的密度设置为 240 时，DROID2 的屏幕密度是 240。

我认为 boulder 是对的，不要改变画布和/或位图的密度。就用它吧……