質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PDF

PDF(Portable Document Format)とはISOによって国際標準として制定されている電子ドキュメント用の拡張子です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

3981閲覧

pdf画像修正

ikunot

総合スコア6

PDF

PDF(Portable Document Format)とはISOによって国際標準として制定されている電子ドキュメント用の拡張子です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/04/06 11:38

編集2015/04/07 00:02

javascriptでpdfファイルの画像を読み込みピクセル単位で読み込んだ画像を修正して元のpdfファイルヘ書くsampleのコードを教えてください。pdf.jsを使いpdfファイルの画像を読み込み画面表示はできますが、ピクセル単位での画像修正と元のpdfファイルへの書き出しができません。よろしくご教示お願いいたします。以下のsammpleに読み込んだ画像のピクセル単位での修正と元のpdfファイルへの書き出しを例示していただけるとありがたいです。
/* -- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -- /
/
vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */

//
// See README for overview
//

'use strict';

//
// Fetch the PDF document from the URL using promises
//
PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
// Using promise to fetch the page
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);

// // Prepare canvas using PDF page dimensions // var canvas = document.getElementById('the-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // // Render PDF page into canvas context // var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext);

});
});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

JavaScriptでやらないといけない理由がありますか?
ファイルを読む方はともかく、書き込む方は、JavaScriptのライブラリはあまり豊富ではないと思いますが...

投稿2015/04/06 22:36

chokojori

総合スコア971

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ikunot

2015/04/06 23:50

ご回答ありがとうございます。ブラウザでサービスを提供するためjavascriptでやりたいと思います。
chokojori

2015/04/07 00:29

PDFをレンダリングしてピクセル単位の画像に変換し、それをさらにPDFに書き戻すという話ですよね? PDFの良さを殺してしまう気がしますが、大丈夫なのかな。 JavaScriptとブラウザにこだわらないなら、ImageMagickあたりですぐに作れますけれど、結局、ImageMagick相当の画像加工ライブラリをJavaScriptで実装することになりますね。どこかにあるのかな...
chokojori

2015/04/07 00:30

PDFファイルをサーバサイドに転送して、サーバサイドでビットマップにレンダリングしたものをブラウザに戻して加工し、加工したものをサーバサイドにあげてPDFにレンダリングしてダウンロードする...のではダメなんでしょうね?
guest

0

簡単ではありません。何らかのライブラリでPDFファイルの読み書きをすることになると思います。
オライリーのPDF構造解説あたりを読んで勉強しましょう。

投稿2015/04/06 12:08

tohshima

総合スコア374

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ikunot

2015/04/06 21:41

ご回答ありがとうございます。pdf.jsを使いpdfファイルの画像を読み込み画面表示はできますが、ピクセル単位での画像修正ができません。また元のpdfファイルへの書き出しができません。ご教示のpdf構造解説を読んでみます。ご回答ありがとうございました。
guest

0

自己解決

renderの改造が必要と判明しましたので自己解決とさせていただきます。
・renderを改造しcanvasに読み込んだpdfの画像を反映させる
・renderより戻りcanvas上の画像を修正する

/* -- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -- /
/
vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */

//
// See README for overview
//

'use strict';

//
// Fetch the PDF document from the URL using promises
//
PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
// Using promise to fetch the page
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);

// // Prepare canvas using PDF page dimensions // var canvas = document.getElementById('the-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // // Render PDF page into canvas context // var renderContext = { canvasContext: context, viewport: viewport };

// page.render(renderContext);
page.render(renderContext).promise.then(function(){

//renderを改造しcanvasに読み込んだpdfの画像を反映させる
//renderより戻りcanvas上の画像を修正する

});
});
});

投稿2015/05/05 06:09

ikunot

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問