getImageDataのドメイン間問題の解決

869 ワード

プロジェクト開発の過程でhtml 5の増加したgetImageDataの方法を使ってカードを剃る効果を実現し、バックグラウンドに画像をアップロードし、携帯電話の端を手で剃る.ローカル開発で問題が発生せず、オンラインになってから剃れないことに気づき、「Uncaaught SecurityError:Failed to execute'getImageData'on'CanvasRenderingContext 2 D':The canvas has been tainted by cross-origin data」とヒントを与えた.エラー.その後、ネットで検索したところ、getImageDataという方法では、このドメイン名以外のピクチャリソースの操作は許可されておらず、サブドメインでもできないことがわかりました.オンラインファイルアップロードディレクトリはサブドメイン名に配置され、ローカルはドメイン名に配置されているため、オンラインで問題が発生します.
問題が発生したら、問題を解決しましょう.以前はブログ「phpで画像をhtmlに埋め込む」を書いていましたが、画像を文字列のフォーマットにしてページに埋め込むことができ、外部局の画像資源はローカルになるのではないでしょうか.この方法でやってみてください.
<?php
$pic = 'http://avatar.csdn.net/7/5/0/1_molaifeng.jpg';
$arr = getimagesize($pic);
$pic = "data:{$arr['mime']};base64," . base64_encode(file_get_contents($pic));
?>

<img src="<?php echo $pic ?>" />