javascript - 캔버스는 스크린샷을 합성하고 이미지를 업로드한 후 64비트로 코딩된 이미지를 압축합니다.
- WBOY원래의
- 2016-08-08 09:06:491134검색
모바일 페이지에서 작업 중입니다. 요구 사항은 다음과 같습니다. 템플릿 이미지에서 사용자가 입력 상자에 정보를 입력한 다음 HTML2canvas 플러그인을 통해 페이지의 스크린샷을 찍은 다음 공유합니다. 영상. 사진은 저희 회사의 출판 플랫폼에 올릴 수 없기 때문에 이 템플릿 사진은 제 개인 서버에 올려져 있습니다. 사진의 링크 주소는 www.myself.com/aa.png입니다. 그러면 제가 만든 페이지의 링크 주소는 www.gongsi.com/index.html 입니다. 그러면 캔버스로 스크린샷을 찍을 때 스크린샷을 찍은 후에 도메인 간 사진이 표시되지 않기 때문에 64비트 코드를 통해 사진을 프런트 엔드로 전송하도록 서버에 PHP 인터페이스를 작성했습니다.
php code :
<code>$file="../img/p6.png";
$type=getimagesize($file);//取得图片的大小，类型等
$fp=fopen($file,"r")or die("Can't open file");
$file_content=chunk_split(base64_encode(fread($fp,filesize($file))));//base64编码
switch($type[2]){//判读图片类型
case 1:$img_type="gif";break;
case 2:$img_type="jpg";break;
case 3:$img_type="png";break;
}
$img='data:image/'.$img_type.';base64,'.$file_content;//合成图片的base64编码
fclose($fp);
echo $_GET['callback'] . "(" . json_encode(array('img' => $img)) . ")";
</code>
프런트 엔드는 이를 수신한 후 img 태그의 src 속성을 직접 설정합니다.
<code>imgDiv.setAttribute("src", data.img);
</code>
이때 img 태그의 src 속성은 64비트 코드 묶음으로 이미지가 정상적으로 표시될 수 있으며, 이후 HTML2canvas를 통해 스크린샷이 찍힙니다.
<code>html2canvas(screen,
{
width:$(".capture_screen").width(),
height:$(".capture_screen").height(),
canvas:canvas,
onrendered:function(canvas){
sendImg(canvas.toDataURL()); //发送64位码到服务器
}
}) </code>
, 백엔드 PHP가 수신한 코드는 다음과 같습니다.
<code>define('UPLOAD_DIR', '../images/');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
if($success)
{
$imgStatus = 1;
echo json_encode(array('status' => '1', 'imgStatus' => $imgStatus, 'img' => $file)); //存储成功
}
else
{
$imgStatus = -1;
echo json_encode(array('status' => '-1', 'msg' => '存储失败')); //存储失败
}</code>
모든 과정이 끝났습니다. 그러면 사용자가 서버에 업로드한 사진 중 일부가 정상적으로 표시되고 일부는 압축됩니다.
묻고 싶습니다. 이미지 압축의 문제점은 무엇입니까?
답글 내용:
모바일 페이지에서 작업 중입니다. 요구 사항은 다음과 같습니다. 템플릿 이미지에서 사용자가 입력 상자에 정보를 입력한 다음 HTML2canvas 플러그인을 통해 페이지의 스크린샷을 찍은 다음 공유합니다. 영상. 사진은 저희 회사의 출판 플랫폼에 올릴 수 없기 때문에 이 템플릿 사진은 제 개인 서버에 올려져 있습니다. 사진의 링크 주소는 www.myself.com/aa.png입니다. 그러면 제가 만든 페이지의 링크 주소는 www.gongsi.com/index.html 입니다. 그러면 캔버스로 스크린샷을 찍을 때 스크린샷을 찍은 후에 도메인 간 사진이 표시되지 않기 때문에 64비트 코드를 통해 사진을 프런트 엔드로 전송하도록 서버에 PHP 인터페이스를 작성했습니다.
php code :
<code>$file="../img/p6.png";
$type=getimagesize($file);//取得图片的大小，类型等
$fp=fopen($file,"r")or die("Can't open file");
$file_content=chunk_split(base64_encode(fread($fp,filesize($file))));//base64编码
switch($type[2]){//判读图片类型
case 1:$img_type="gif";break;
case 2:$img_type="jpg";break;
case 3:$img_type="png";break;
}
$img='data:image/'.$img_type.';base64,'.$file_content;//合成图片的base64编码
fclose($fp);
echo $_GET['callback'] . "(" . json_encode(array('img' => $img)) . ")";
</code>
프런트 엔드는 이를 수신한 후 img 태그의 src 속성을 직접 설정합니다.
<code>imgDiv.setAttribute("src", data.img);
</code>
이때 img 태그의 src 속성은 64비트 코드 묶음으로 이미지가 정상적으로 표시될 수 있으며, 이후 HTML2canvas를 통해 스크린샷이 찍힙니다.
<code>html2canvas(screen,
{
width:$(".capture_screen").width(),
height:$(".capture_screen").height(),
canvas:canvas,
onrendered:function(canvas){
sendImg(canvas.toDataURL()); //发送64位码到服务器
}
}) </code>
, 백엔드 PHP가 수신한 코드는 다음과 같습니다.
<code>define('UPLOAD_DIR', '../images/');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
if($success)
{
$imgStatus = 1;
echo json_encode(array('status' => '1', 'imgStatus' => $imgStatus, 'img' => $file)); //存储成功
}
else
{
$imgStatus = -1;
echo json_encode(array('status' => '-1', 'msg' => '存储失败')); //存储失败
}</code>
모든 과정이 끝났습니다. 그러면 사용자가 서버에 업로드한 사진 중 일부가 정상적으로 표시되고 일부는 압축됩니다.
묻고 싶습니다. 이미지 압축의 문제점은 무엇입니까?