プレビュー（データベースなし）で画像のサイズを変更するには

入力タイプ=ファイル（画像）をプレビューし、pdfに生成するスクリプトがあります。プレビュー（データベースなし）で画像のサイズを変更するには

小さな画像でも問題ありません。それから私はサイズ6Mbで入力すると、プレビューはOKですが、pdfに生成すると非常に長い時間がかかり、最終的には停止します。

画像のサイズを200x240pxに変更します。しかし、私はそれを行う方法がわからないので、スクリプトは、javascriptを使用し、私はまだそれを初心者です。

スクリプトのサイズを変更する方法をお手伝いしてください。

スクリプト：

function previewFile(){ 
    var preview = document.querySelector('img'); //selects the query named img 
    var file = document.querySelector('input[type=file]').files[0]; //sames as here 
    var reader = new FileReader(); 

    reader.onloadend = function() { 
    console.log(reader.result); 
     //preview.src = reader.result; 
     $('#gen-template-frame').contents().find('.logo img').attr('src', reader.result); 
    } 

    if (file) { 
     reader.readAsDataURL(file); //reads the data as a URL 
    } else { 
     preview.src = ""; 
    } 
}

はHTML：

<!doctype html> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="../css/magang/front.css"> 
</head> 
<body> 
    <div class="corpname" contenteditable>RUMAH SAKIT HARUM</div> 
    <div class="logosisma"><img src="https://sismadigroup.com/idcard/images/background/logo-id-card.png" width="219" height="70" /></div> 
    <div class="logo"> 
     <!--<img src="resize/resize.php?src=https://sismadigroup.com/idcard/templates/images/avatar/3.jpg&scale=10&q=100">--> 
     <img src="https://sismadigroup.com/idcard/templates/images/avatar/3.jpg" width="200" height="240" /> 
    </div> 
    <div class="name highlight" contenteditable>Maesyaroh</div> 
    <div class="position" contenteditable>Siswa Magang</div> 
    <div class="nik" contenteditable>SM-0035</div> 
    <div class="BBP">BENAR &nbsp; BAIK &nbsp; PANTAS</div> 
    <div class="BBPPoint" style="left:135px;"> . </div> 
    <div class="BBPPoint" style="left:203px;"> . </div> 
</body> 
</html>

編集：PDF生成のためのPHP：

$frontPage = resolveDependency(stripslashes($_POST[ "html" ])); 
$backPage = resolveDependency(stripslashes($_POST[ "html2" ])); 
$frontPageCSS = getCSSFromHTML($frontPage); 
$backPageCSS = getCSSFromHTML($backPage); 
$mpdf = new mPDF('utf-8', array(75, 114.6), 0, '', 0, 0, 0, 0, 0, 0); 
$mpdf->WriteHTML($frontPageCSS, 1); 
$mpdf->WriteHTML($frontPage, 0); 
$mpdf->WriteHTML('<pagebreak>', 2); 
$mpdf->WriteHTML($backPageCSS, 1); 
$mpdf->WriteHTML($backPage, 0); 
$mpdf->Output('card.pdf', 'I');

出典

2017-09-22 ujang7654321 ujang7654321

私はあなたがJSでそれをすることはできないと思いますが、おそらくあなたはサーバー側でそれを行うことができます。どのようにPDFを生成していますか？ –

'$ frontPage = resolveDependency（stripslashes（$ _POST [" html "]））; \t $ backPage = resolveDependency（stripslashes（$ _POST ["html2"]））; \t $ frontPageCSS = getCSSFromHTML（$ frontPage）; \t $ backPageCSS = getCSSFromHTML（$ backPage）; \t $ mpdf =新しいmPDF（ 'utf-8'、配列（75,114.6）、0、 ''、0、0、0、0、0、0）; \t $ mpdf-> WriteHTML（$ frontPageCSS、1）; \t $ mpdf-> WriteHTML（$ frontPage、0）; \t $ mpdf-> WriteHTML（ ''、2）; \t $ mpdf-> WriteHTML（$ backPageCSS、1）; \t $ mpdf-> WriteHTML（$ backPage、0）; \t $ mpdf->出力（ 'card.pdf'、 'I'）; ' –

私はそのようなスクリプトを使用しています –

あなたは画像のサイズを変更することができますPDFを生成するためにPHPを使用しているのでPHPを使用する前にmPDFと一緒に使用してください。あなたのコードに画像をロードする方法が表示されないので、Image()関数を使用してファイルからイメージをロードするとします（この例では$fileNameは入力イメージの名前です。あなたのコードで使用してください）：

// $fileName is the name of the input image 
list($width,$height)=getimagesize($fileName); // size of input image 
$tempFileName=tempnam(sys_get_temp_dir(),"img").".png"; 
$newWidth=200; 
$newHeight=240; 

$image=imagecreatefrompng($fileName); // load the input image 
$newImage=imagecreatetruecolor($newWidth,$newHeight); //create an empty image 
imagecopyresampled($newImage,$image,0,0,0,0,$newWidth,$newHeight,$width,$height); 
imagepng($newImage,$tempFileName,9); // saving the new image to disk 

// here you create the PDF using the image saved in $tempFileName 

unlink($tempFileName); // and finally we delete the temporal file

出典

2017-09-22 16:26:32

ファイルをアップロードする前に、私は同じ問題をフロントエンドで解決しました。 a linkを訪問することができます！

出典

2017-11-14 13:35:12

プレビュー（データベースなし）で画像のサイズを変更するには

答えて

関連する問題