Use Javascript to fetch to the image for the ImageViewController
This commit is contained in:
Maurice Parker
parent
a1f26898c8
commit
4759cedd35
|
|
@ -349,13 +349,36 @@ extension ArticleViewController: WKUIDelegate {
|
|||
extension ArticleViewController: WKScriptMessageHandler {
|
||||
|
||||
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
|
||||
if message.name == MessageName.imageWasClicked, let link = message.body as? String, let url = URL(string: link) {
|
||||
let imageVC = UIStoryboard.main.instantiateController(ofType: ImageViewController.self)
|
||||
imageVC.url = url
|
||||
imageVC.modalPresentationStyle = .fullScreen
|
||||
present(imageVC, animated: true)
|
||||
if message.name == MessageName.imageWasClicked,
|
||||
let body = message.body as? String,
|
||||
let data = body.data(using: .utf8),
|
||||
let clickMessage = try? JSONDecoder().decode(ImageClickMessage.self, from: data),
|
||||
let range = clickMessage.imageURL.range(of: ";base64,") {
|
||||
|
||||
let base64Image = String(clickMessage.imageURL.suffix(from: range.upperBound))
|
||||
if let imageData = Data(base64Encoded: base64Image), let image = UIImage(data: imageData) {
|
||||
let imageVC = UIStoryboard.main.instantiateController(ofType: ImageViewController.self)
|
||||
imageVC.image = image
|
||||
imageVC.modalPresentationStyle = .fullScreen
|
||||
present(imageVC, animated: true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// MARK: JSON
|
||||
private struct TemplateData: Codable {
|
||||
let style: String
|
||||
let body: String
|
||||
}
|
||||
|
||||
private struct ImageClickMessage: Codable {
|
||||
let x: Float
|
||||
let y: Float
|
||||
let width: Float
|
||||
let height: Float
|
||||
let imageURL: String
|
||||
}
|
||||
|
||||
// MARK: Private
|
||||
|
|
@ -369,8 +392,3 @@ private extension ArticleViewController {
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
private struct TemplateData: Codable {
|
||||
let style: String
|
||||
let body: String
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ class ArticleViewControllerWebViewProvider: NSObject, WKNavigationDelegate {
|
|||
|
||||
let configuration = WKWebViewConfiguration()
|
||||
configuration.preferences = preferences
|
||||
configuration.setValue(true, forKey: "allowUniversalAccessFromFileURLs")
|
||||
configuration.allowsInlineMediaPlayback = true
|
||||
configuration.mediaTypesRequiringUserActionForPlayback = .video
|
||||
|
||||
|
|
|
|||
|
|
@ -11,55 +11,29 @@ import UIKit
|
|||
class ImageViewController: UIViewController {
|
||||
|
||||
@IBOutlet weak var shareButton: UIButton!
|
||||
@IBOutlet weak var activityIndicatorView: UIActivityIndicatorView!
|
||||
@IBOutlet weak var imageScrollView: ImageScrollView!
|
||||
|
||||
private var dataTask: URLSessionDataTask? = nil
|
||||
private var image: UIImage?
|
||||
var url: URL!
|
||||
var image: UIImage!
|
||||
|
||||
override func viewDidLoad() {
|
||||
super.viewDidLoad()
|
||||
|
||||
activityIndicatorView.isHidden = false
|
||||
activityIndicatorView.startAnimating()
|
||||
|
||||
imageScrollView.setup()
|
||||
imageScrollView.imageScrollViewDelegate = self
|
||||
imageScrollView.imageContentMode = .aspectFit
|
||||
imageScrollView.initialOffset = .center
|
||||
|
||||
dataTask = URLSession.shared.dataTask(with: url) { [weak self] data, response, error in
|
||||
guard let self = self else { return }
|
||||
|
||||
if let data = data, let image = UIImage(data: data) {
|
||||
|
||||
self.image = image
|
||||
|
||||
DispatchQueue.main.async {
|
||||
self.shareButton.isEnabled = true
|
||||
self.activityIndicatorView.isHidden = true
|
||||
self.activityIndicatorView.stopAnimating()
|
||||
self.imageScrollView.display(image: image)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
dataTask!.resume()
|
||||
imageScrollView.display(image: image)
|
||||
}
|
||||
|
||||
@IBAction func share(_ sender: Any) {
|
||||
guard let image = image else { return }
|
||||
let activityViewController = UIActivityViewController(activityItems: [url!, image], applicationActivities: nil)
|
||||
let activityViewController = UIActivityViewController(activityItems: [image], applicationActivities: nil)
|
||||
activityViewController.popoverPresentationController?.sourceView = shareButton
|
||||
activityViewController.popoverPresentationController?.sourceRect = shareButton.bounds
|
||||
present(activityViewController, animated: true)
|
||||
}
|
||||
|
||||
@IBAction func done(_ sender: Any) {
|
||||
dataTask?.cancel()
|
||||
dismiss(animated: true)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -237,19 +237,10 @@
|
|||
<subviews>
|
||||
<scrollView verifyAmbiguity="off" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" ambiguous="YES" translatesAutoresizingMaskIntoConstraints="NO" id="msG-pz-EKk" customClass="ImageScrollView" customModule="NetNewsWire" customModuleProvider="target">
|
||||
<rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
|
||||
<subviews>
|
||||
<activityIndicatorView opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="750" verticalHuggingPriority="750" style="large" translatesAutoresizingMaskIntoConstraints="NO" id="iEh-n3-Vkg">
|
||||
<rect key="frame" x="188.5" y="390.5" width="37" height="37"/>
|
||||
</activityIndicatorView>
|
||||
</subviews>
|
||||
<constraints>
|
||||
<constraint firstItem="iEh-n3-Vkg" firstAttribute="centerX" secondItem="msG-pz-EKk" secondAttribute="centerX" id="FSP-DY-Vax"/>
|
||||
<constraint firstItem="iEh-n3-Vkg" firstAttribute="centerY" secondItem="msG-pz-EKk" secondAttribute="centerY" id="rev-zC-wMY"/>
|
||||
</constraints>
|
||||
<viewLayoutGuide key="contentLayoutGuide" id="phv-DN-krZ"/>
|
||||
<viewLayoutGuide key="frameLayoutGuide" id="NNU-C8-Fsz"/>
|
||||
</scrollView>
|
||||
<button opaque="NO" contentMode="scaleToFill" enabled="NO" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="RmY-a3-hUg">
|
||||
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="RmY-a3-hUg">
|
||||
<rect key="frame" x="362" y="44" width="44" height="44"/>
|
||||
<constraints>
|
||||
<constraint firstAttribute="width" constant="44" id="56o-Zr-T0w"/>
|
||||
|
|
@ -288,7 +279,6 @@
|
|||
<viewLayoutGuide key="safeArea" id="mbY-02-GFL"/>
|
||||
</view>
|
||||
<connections>
|
||||
<outlet property="activityIndicatorView" destination="iEh-n3-Vkg" id="xue-X1-awS"/>
|
||||
<outlet property="imageScrollView" destination="msG-pz-EKk" id="dGi-M6-dcO"/>
|
||||
<outlet property="shareButton" destination="RmY-a3-hUg" id="Z54-ah-WAI"/>
|
||||
</connections>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,34 @@
|
|||
// Used to pop a resizable image view
|
||||
function imageWasClicked(img) {
|
||||
window.webkit.messageHandlers.imageWasClicked.postMessage(img.src);
|
||||
async function imageWasClicked(img) {
|
||||
const rect = img.getBoundingClientRect();
|
||||
|
||||
var message = {
|
||||
x: rect.x,
|
||||
y: rect.y,
|
||||
width: rect.width,
|
||||
height: rect.height
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(img.src);
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok.');
|
||||
}
|
||||
|
||||
const imgBlob = await response.blob();
|
||||
|
||||
var reader = new FileReader();
|
||||
reader.readAsDataURL(imgBlob);
|
||||
|
||||
reader.onloadend = function() {
|
||||
message.imageURL = reader.result;
|
||||
var jsonMessage = JSON.stringify(message);
|
||||
window.webkit.messageHandlers.imageWasClicked.postMessage(jsonMessage);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('There has been a problem with your fetch operation: ', error.message);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Add the click listeners for images
|
||||
|
|
|
|||
Loading…
Reference in New Issue