日本学術振興会🖼️ ページに収まるスケールでイメージを調整します.
10976 ワード
ベースの
オンラインPDFメーカー/ジェネレータ.
無力なことをするのは難しい.より多くのライブラリを取得する必要があります.🤓.
私はまた、サーバーレスPDFジェネレータを作成しようとしていたと私は非常に便利なライブラリを使用して見つかりました.これがJSPDFです.だから、私はそれを撮影し、アプリを作り始めた.
JSPDFの使用
また、ライブラリを実装することは簡単ではなかった.主に写真はPDFファイルのページに合わない.
例を示しましょう。
このスクリーンショットでは、写真がPDFページから出ているのを見ることができます
私はGoogleでそれを捜しました、しかし、また、この問題に関する解決を与えられないJSPDFも書かれていない記事.
それで、私はこの問題を解決し始めました.
比率
比率を知ることは重要です
画像の高さの幅のように、PDFのページに収まるような小さな画像を得ることができます
イメージの比率を得る方法
Note : we have to get ratio of image exact after image upload so, we can be able to use it globally whenever we wanted..
コード化しましょう
<input type="file" onchange="getratio(this.files"/>
var images_to_convert = []
var getRatio = (files) =>{
// Note files is json object not array object
for(let file of Object.values(files)){
let reader = new FileReader();
reader.onloadend=()=>{
let imgsrc = reader.result;
addImageToPdf(imgsrc);
}
reader.readAsDataUrl(file);
}
function addImageToPdf (src){
// src is data url of image
let img = new Image();
img.onload=()=>{
images_to_convert.push({src:img.src, height:img.height,width:img.width})
// Now successfully ratio of height as width is noted
}
img.src=src;
}
ページにイメージフィットを作る
Image by icons8
現在、我々はイメージの比率を持ちます.必要なのはページの高さと幅です.
A 4ページは幅が210 mm、高さが300 mmで、マックスは300 mm * 210 mmです.
const max = {height:300,width:210}
ので、高さだけでなく、幅が減少または増加するので、比率は同じ割合でなります.
レンダリング
今私たちがある
ページの幅がイメージ幅より小さいならば、イメージ幅は同様にページ幅であるでしょう.
コードで示す
var render = () =>{
var doc = new jsPDF("p", "mm", "a4");
image_to_convert.forEach(img=>{
// img is json that we stored previously
let height=img.height,width=img.width,src=img.src,ratio=img.height/img.width;
if(height>max.height||width>max.width){
if(height>width){
height=max.height;
width=height*(1/ratio);
// Making reciprocal of ratio because ration of height as width is no valid here needs width as height
}else if(width > height){
width=max.width;
height=width*ratio;
// Ratio is valid here
}
}
doc.addImage(src,"png",0,0,width,height);
doc.addPage("p","mm","a4");
// Now successfully fitted image on page
// I will prefer to use mm instead px
});
doc.save("download.pdf");
}
デモ
https://formal-stack.netlify.app/
私はPDFに画像を変換するアプリを作成している.JSPDFのページにどのようにイメージが合っているかを示します.
ソースコード:
NotableApp / 形式的スタックPDF
イメージ、Markdownとより多くからPDFを作ってください。
形式的スタックPDF
PDFファイルは、PDFファイルに多くの機能をすぐに来て、Markdownテキスト、プレーンテキスト、画像からのような複数の方法で作成されたアプリ.
正式な貢献
あなたが我々のアプリ/サイトに貢献したいならば、あなたのために問題avaiilibilityを見てください、そして、フォーク、編集して、PRを計画してください.
View on GitHub
あなたが我々のアプリ/サイトに貢献したいならば、あなたのために問題avaiilibilityを見てください、そして、フォーク、編集して、PRを計画してください.
View on GitHub
Reference
この問題について(日本学術振興会🖼️ ページに収まるスケールでイメージを調整します.), 我々は、より多くの情報をここで見つけました https://dev.to/shubham_ingale/jspdf-adjust-image-height-and-width-in-ratio-which-will-fit-on-page-469oテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol